Come animare il testo della scrittura a mano sulla pagina web usando SVG?

Sto cercando di animare un testo che ho creato e salvato come SVG. Finora sono stato in grado di animare solo il tratto, ma non è quello che sto cercando di ottenere. Ecco il link all’esempio di cui ho bisogno:

[http://codepen.io/se7ensky/pen/waoMyx][1] [https://codepen.io/munkholm/pen/EaZJQE][1] 

Apprezzerò davvero se qualcuno può spiegare come posso implementarlo.

Ecco cosa ho finora:

  [https://codepen.io/sora1/pen/LZNZva][1] 

Il modo in cui l’animazione Se7ensky funziona è che utilizza la tecnica di animazione del trattino standard, ma ritaglia il tratto animato con un contorno che rappresenta l’aspetto del logo disegnato a mano.

Quindi la tecnica di animazione del trattino standard funziona come segue. Prendi una linea standard:

    

L’esempio sembra una combinazione di percorsi svg e animazioni ritardate.

Questo post del blog di CSS-Tricks lo spiega abbastanza bene (si noti che lo svg deve avere tratti per farlo funzionare): https://css-tricks.com/svg-line-animation-works/

Ecco una guida su stroke-dashoffset (utilizzata nell’esempio) che potrebbe essere utile: https://css-tricks.com/almanac/properties/s/stroke-dashoffset/