The text is actually the SVG path. In this demo, stroke-dashoffset techniques are used to draw the path.
Text drawing animation can be done using svg's stroke-dashoffset and stroke-dasharray in a similar way as stroke animation for a shape/path. First we create the text using the text element in svg. Using css we apply stroke-dasharray and stroke-dashoffset.
in the first example we use 'short' stroke dash.
In the second example we use 'long' dash. We set the initial stroke-dashoffset to 600 and the same to stroke-dasharray. This hides the stroke of the element, thereby making the text invisible. Next we give it an animation with name 'stroke' and set the duration of the animation. The animation makes the stroke-dashoffset to 0, thereby making it look like it is drawing.