Nsryjdtyk

I've an svg on which I want to perform an animated typing effect, exactly like this codepen example.
Here is the original code of that codepen:

<svg width="100%" height="100%" viewBox="30 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

 <path id="path" d="m 0 110 h 342.868">

        <animate attributeName="d" from="m0,110 h0" to="m0,110 h1100" dur="6.8s" begin="0s" repeatCount="indefinite"></animate>

    </path>

    <text font-size="26" font-family="Montserrat" fill="hsla(36, 95%, 85%, 1)">

        <textPath xlink:href="#path">I'm An Animated Typing Example &amp;&amp; I'm All SVG.

    </textPath>

    </text>

</svg>

As you can see, that codepen uses path to animate a text through the textpath tag.

But I've an svg where the text isn't contained in a textpath but in a tspan instead, on which I want to accomplish the same effect.

Here is my SVG code:

   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="303.29140625" height="139.28875199999993" viewBox="0 0 303.29 139.29" xml:space="preserve">

         <desc>Created with Fabric.js 2.4.3</desc>



         <defs></defs>

         <g transform="matrix(1.55 0 0 1.53 151.65 69.64)" style=""  >



            <text xml:space="preserve" font-family="Times" font-size="24" font-style="normal" font-weight="bold" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; white-space: pre;" >

               <tspan  xlink:href="#path" x="-97.34" y="-23.92" style="fill: rgb(25,115,217); white-space: pre; ">I am an Animated</tspan>

               <tspan x="-97.34" y="7.54" style="fill: rgb(25,115,217); white-space: pre; ">And I'm all SVG</tspan>

            </text>

         </g>

   </svg>

Please how can I perform such typing animation effect using tspan with pure svg tools ?