How to animate calligraphy text as if it's written by hand

Question

I'm looking for some direction, not necessarily code.
I would like to spell out my name with SVG text.
So far I've been able to place it and allow it to animate drawing, but it doesn't happen in a linear writing fashion.

I use the code below which you can see fully here:

<svg width="700" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text class="path" xml:space="preserve" text-anchor="middle" font-family="pharmount" font-size="100" id="svg_1" y="230" x="300" stroke-width="2" stroke="#000000" fill="#000000">Martavis Parker</text>
</svg>

Any idea how I can make it so that the name writes across as if you're actually writing on paper?

Answer 1

Convert the text to path(s) (you most likely want a path describing how you'd draw each letter), then animate stroke-dashoffset, see How to draw a vector path progressively? (Raphael.js) for more details.

Some resources (with examples) to look through:

• http://css-tricks.com/svg-line-animation-works/
• http://lazylinepainter.info/
• http://cssdeck.com/labs/ironman-svg-line-animation
• https://medium.com/the-javascript-collection/ded23320ffe5