How to animate an svg in reverse with anime.js? - animation

Question

I've tweaked this example of an SVG animation from the anime.js docs:
https://codepen.io/fergusmeiklejohn/pen/gOwdVpq
I'm trying to animate drawing the word from the end of the word to the beginning. Can Anime.js do this? direction: 'reverse' doesn't work as I hoped it would. It animates in reverse but starts with the complete svg and ends with nothing.
I also had the idea that if anime can't do this, is a solution to redraw the SVG in reverse?
Thanks all! :-)

Answer 1

SVG mask solution
The idea is to first hide the word with the mask, then use the stroke-dashoffset animation for the mask to gradually reveal the word.
The mask will have a wide line to show the bottom word with different line widths in different parts of the word.
To do this, we need to draw a center line in the vector editor, repeating all the bends of the lower word
The red line in the figure is the centerline for the wide line of the mask.
body {
height: 100vh;
width: 100%;
background-color: #35dad2;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
svg {
width: 40em;
}
#word {
fill:white;
}
#msk {
fill:none;
stroke:#fff;
stroke-width:12;
stroke-dasharray:1100px;
stroke-dashoffset:1100px;
}
<h3>
<svg xmlns="http://www.w3.org/2000/svg" class="subtitle" viewBox="0 0 229.2 69.6">
<defs>
<mask id="msk">
<path d="M226.7 46.7s-.6-4-2-5.2a9 9 0 00-7.6-1.8c-3.6.8-5.7 4.7-8.7 7-3 2.1-6 4.4-9.3 6.3-3.2 1.7-6.5 3.6-10 4.3-1.9.4-5.3 1.6-5.6-.2-.8-3.7 2.8-8.5 4.3-12.7 1.8-4.9 2.5-10.5 5.8-14.6 2-2.6 4.7-5.5 7.9-5.6 2.2 0 4.8 1.5 5.5 3.6 1 2.7-1 5.9-2.5 8.3-1.4 2.1-3.4 4.1-5.8 5-4 1.4-9.3-3.4-12.9-.2-6.7 6-11 9.6-19 16.6-.8.8-5.6.7-5-.2 8.7-11 14-25.5 22-38.2 1.6-2.4 5.2 2 7.3 1 .8-.5 1.5-1.7 1-2.4-.8-1.7-4.3.6-5.7-.8-1-1 .3-3-.4-4.4-.5-.9-2-3.8-2.5-2-1 3.3-2.8 5.3-5.3 6.6-2.1 1.2-7.3.8-7.3.8v0s-.4-2.4-1.3-2.8c-1.4-.6-2.5-1.3-4.4 1.3 0 0-3.4.9-3.1 2 .1 1 1.7.5 2.5.6 1.5.3 3 .8 4.4.9 3.2.3 8-2.7 9.7 0 3.4 5-3.8 11.8-7.3 16.8-2.3 3.2-6.2 2.9-8.5 8.1-3.9 8.7-10.7 15.8-16.5 12.1-1.5-1 1-5.1 1-5.1 2.8-11.3 18.1-16 12.7-22.8-.4-.5-.9-1.3-2 .5-7.1 12.8-3.6 3.9-6.5 7.2-2 2.3-5.4 2.7-8 4.2-4.3 2.4-8.8 4.8-12.8 7.7-1.4 1-3.6 1.5-3.8 3.2-.2 1.8 1.8 3.3 3.4 4.3 1 .7 2.4 1.3 3.5.8 2.2-1 2.8-4 3.2-6.3.5-3.5-1.5-6.8-1.6-10.3 0-2.8-.4-5.9.8-8.3 1.3-2.5 4-3.9 6.2-5.6 2.2-1.8 7.5-2.2 7-5.1-1.4-10-23.6-18.2-28.6-9.8-7 11.6-12.4 19.5-15.9 30.4-.9 2.8-2 6-1.2 8.9.7 2.8 2.3 6.7 5.2 7 3.3.2 5.2-4.4 7.3-7 3.3-4.3 6-9 7.7-14 .9-2.5 3.5-8.5 1.4-7.6-4.5 1.8-7.7 9.8-12.9 13.3-3.3 2.2-8.4 1.6-11.3 4.5-2.8 3-.2 11.1-4.3 11.5-1.2.1-1.6-1.8-1.8-3-.4-2.2 3.3-8 1.4-6.7-3 1.8-5.6 4.4-8.7 6-2.4 1.1-5 2.8-7.6 2.5-1.3-.1-3-.7-3.5-2-1.7-3.8 1.2-8.4 2.7-12.2 1.8-4.3 4.3-8.3 7.2-12 2-2.4 3.8-6.1 7-6.5 2.2-.2 5.1 1.4 5.9 3.6.7 2.3-1.3 4.7-2.6 6.7-1.7 2.7-3.7 5.8-6.8 7-2.2.8-6.5 1.9-7-.4-2-7 6.3-15.3 9.7-22.5 2.7-5.5 0-16.2-3.4-12.4-4.7 5.2-7.5 11.3-11.3 16.8-3.6 5.2-7.3 10.3-11.1 15.3-2.4 3-5 6-7.6 9-4 4.4-8 9-12.8 12.8C43.3 63 39 68.6 36 66.8c-2.4-1.4-2.4-4.5 0-8.3 4.5-7.2 10.3-10.4 14.4-20.4 3.2-7.7 10.4-13.8 12.5-22 .5-1.8.7-4 0-5.7-.4-1.1-1.8-3.6-2.4-2.6-4.1 7.3-4.2 16.6-10.5 21.6a248 248 0 00-29.7 29.3c-.9 1-3-.4-3.6-1.6-1-2.3 1.7-4.8 2.8-7.1 3-6 6.9-11.5 10.3-17.3 2.6-4.2 5.4-8.2 7.7-12.6 1.6-3 5.5-6 4-9-1.4-2.6-5.9-2-9-1.7-4 .4-7.5 2.9-11.2 4.7a76.8 76.8 0 00-10 5.8C9 21.7 5 22.9 4.3 26c-.6 2 .5 4.6 2 6.2a7.7 7.7 0 005.2 2.2c1.8 0 5-1.7 5-1.7">
<!-- Animation of the mask opening the word -->
<animate id="an"
attributeName="stroke-dashoffset"
begin="0s"
dur="3s"
values="1100;0"
fill="freeze"
repeatCount="indefinite"/>
</path>
</mask>
</defs>
<!-- The word is hidden by the mask -->
<path id="word" mask="url(#msk)" d="M79.7 29.1a344.4 344.4 0 01-20.4 23.4 152 152 0 01-13.8 12.6c-4.6 3.5-7.9 5.3-9.8 5.3h-.4c-2.9 0-4.8-1-5.6-3l-.2-1v-.6c0-2.2 1.8-6.5 5.5-12.8l7.8-14.3c-11.4 10.8-19 18.3-23 22.1-1.8 0-3.4-.6-4.8-1.8-.6-.7-.9-1.7-.9-2.9 0-2.3 1.8-6.5 5.4-12.6a6587 6587 0 0016.3-30.1h-.2A48.2 48.2 0 008.5 28.9v.1a5.5 5.5 0 002.5 2.9c1.5.5 3 .7 4.5.7l.9.1c0 .9-1.6 1.9-4.8 3.1-1.7.5-3.1.7-4.2.7h-.5c-2.5 0-4.2-2.8-4.9-8.4l-.1-1.6v-1.1a7 7 0 012.8-5.9c1.8-1.7 4.1-3.4 7-5.1 4-2.3 9.3-4.5 15.8-6.6A50 50 0 0139 6c1.5.2 2.9.8 4 1.8a7.9 7.9 0 012.6 5.9 1744.2 1744.2 0 01-17.5 32v.1l22.1-20.9C56 14 59.2 7.7 59.5 6.1c1.4.2 2.7.7 4 1.7a7.7 7.7 0 012.7 6.2v.1C49.7 44 41.2 59.4 40.8 60.4c1.8-1.6 4.3-4.2 7.7-7.8 9.4-10.6 18.4-22 27.2-34A79.7 79.7 0 0086.4 1l.1-1.1v-.1l.2-.1c1.5.4 3.1 1.4 4.9 3C93.4 5 94.4 6.8 94.4 8c-2.9 5.2-7.8 12.2-14.7 21.1zM125.8 40l-1.6 3-2 3.8-2.1 3.7c-1.8 3.2-3.2 5.7-4.1 7.6-1.5 2.8-4.1 3.4-7.7 2-1.5-.6-2.8-1.4-4-2.5a10.2 10.2 0 01-2.5-3.4l-3.6 6.6c-4.5-.4-6.3-2.4-5.6-6l-3 2.1a27.3 27.3 0 01-8.7 3.7l-1.8.2h-.4c-1.8 0-3.4-.7-4.7-2a10.6 10.6 0 01-2.1-6.6v-.6c0-3.1 1.1-7 3.2-11.5a36 36 0 0113.8-16.2l3-1.5 1.6-.6c.7 0 1.9.2 3.4.6l2.2.7c2.5 1.2 3.8 3 3.8 5.4v.4c0 1.6-.6 3.5-1.9 5.7a29.4 29.4 0 01-9.5 9.4l-8.3.2-1.6 2.4c-1.5 2.7-2.3 5-2.6 6.9.1.3.4.5.9.5h.1a45.5 45.5 0 0015.9-7.7l1.2-.9 1.4-2.6 4.5-8.3.7-1.4.8-1.4 1.6-2.9 3.2-5.9c5.4-9.8 8-15.1 7.9-15.9 2 .2 3.6 1 4.8 2.6a7 7 0 011.7 5.2l-11.9 21.5 3.3-3 1.7-1.5 1.7-1.6 6-5.4c4.6.4 6.4 2.6 5.4 6.6-.4 1.5-1.2 3.4-2.4 5.7l-.8 1.5-.9 1.4zm-40.4-1.2l4 .2a9 9 0 003.9-2.5 11.1 11.1 0 002.7-6.3c0-.7-.2-1.1-.6-1.3h-.2c-.8.1-1.8.7-3.1 1.8a93 93 0 00-2.9 2.8 48.8 48.8 0 00-3.8 5.3zm34.5-2.9l-13.6 11.5-.9.6-.4.6c.2 1.7.7 3 1.5 4 .9 1 1.8 1.4 3 1.1l10.4-17.8zm107.9 7.2v.6c0 1.2-.4 2.2-1.1 3h-.1c-.2-.7-.6-1.3-1.2-1.8a5 5 0 00-1.8-.5h-.6c-3.2 0-9.8 2.8-19.8 8.5-9 5.2-14.8 7.8-17.3 7.8h-.3c-3.4 0-5.6-1.9-6.7-5.6-.2-1.1-.4-2.2-.4-3.1v-.5c0-1.4.2-3 .6-4.6l-14.3 13-.9.8c-1.7 0-3.1-.5-4.4-1.5a4 4 0 01-1.1-2.6V56c0-1.7 1.3-5 4-9.8a659 659 0 01-16.1 14.5 9 9 0 01-4-1.1 3.7 3.7 0 01-1.8-3.2V56c0-2.2 1.5-5.8 4.4-10.9l2.2-3.9a93.5 93.5 0 00-7 3.3c.3 1.7.5 3.2.5 4.7v.3c0 3.4-.9 6.4-2.7 8.9a7 7 0 01-5.3 2.4h-.4a7.6 7.6 0 01-7-4.8c-.3-.9-.5-1.8-.5-2.5v-.4c0-.9.2-1.9.6-3l.3-.4c2.5-2 5-3.8 7.5-5.4-2-3.7-3-6-3-6.9v-1.1c0-3 1.6-6.3 4.8-9.8a35.2 35.2 0 0112.2-8.1 9 9 0 014.6 4c.4.6.7 1.3 1 2.1l.2.4c-2.8.9-5 1.8-6.8 2.9-4.9 2.8-7.4 6.2-7.4 10.2 0 .9.1 1.8.4 2.8 4.9-2.9 8.8-4.9 11.6-6l2.7-4.7a21 21 0 002.5-5.9h.1a7.3 7.3 0 015.5 3.5 7.8 7.8 0 011.1 3.7l-.1.3v.4l-4.2 7.5-5.2 9.1 12.1-11.1c.7-.4 1.4-.6 1.8-.6h.4l9-16.4h-.1l-6.4.2a2 2 0 01-.9-.9l-3.4 3.5a31.2 31.2 0 01-7-1.8v-.1l4-9.3 4.2-.3h1.2c2.7 0 5.3.3 7.8.8v.1l-4.9 5.1 7.3-.8c3-5.5 4.5-8.6 4.5-9.3 1.2 0 2.5.6 4.1 1.8a7.4 7.4 0 012.3 5.4c0 .4-.2 1-.6 1.6l2.6-.1h2.8l.1.2-1.9 4.3h-.1l-5.6-.4-16 28.7h.1l12.1-11.2h.1l2.5-4.4c1.1-1.6 2.6-3.4 4.5-5.4a23 23 0 015.4-4.3c1.4-.9 3-1.8 4.9-2.5l.4-.1c1.8 0 3.8.5 5.9 1.4 2.5 1.2 3.7 3 3.7 5.5 0 3.2-2 6.9-6 11.2a27.9 27.9 0 01-5.5 4.3l-.7.1-7.8.1c-2.1 2.8-3.5 6-4.2 9.4 0 .3.6.6 1.7.7l.7.1h.7c3.1 0 7.8-2.7 13.8-8.1 5.1-4.6 8.7-7.5 10.9-8.8 2-1.1 3.7-1.7 5.1-1.7 4.1 0 7 1.7 8.6 5 .4.9.5 1.8.5 2.5zm-35.5-4.6l4.1.1c1.1-.2 2.2-.9 3.4-2 2.1-2.3 3.1-4.6 3.1-6.9-.1-.8-.3-1.2-.7-1.2-2.8.8-6.1 4.2-9.9 10zm-57.5 9.4a34 34 0 00-2.7 2.3c-.6.6-1 1.2-1.4 1.8 1.5-.4 2.6-1 3.4-1.8.4-.5.6-1 .6-1.7v-.6z"/>
</svg>
</h3>
With a 2s pause between reps
body {
height: 100vh;
width: 100%;
background-color: #6247D5;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
svg {
width: 40em;
}
#word {
fill:white;
}
#msk {
fill:none;
stroke:#fff;
stroke-width:12;
stroke-dasharray:1100px;
stroke-dashoffset:1100px;
}
<h3>
<svg xmlns="http://www.w3.org/2000/svg" class="subtitle" viewBox="0 0 229.2 69.6">
<defs>
<mask id="msk">
<path d="M226.7 46.7s-.6-4-2-5.2a9 9 0 00-7.6-1.8c-3.6.8-5.7 4.7-8.7 7-3 2.1-6 4.4-9.3 6.3-3.2 1.7-6.5 3.6-10 4.3-1.9.4-5.3 1.6-5.6-.2-.8-3.7 2.8-8.5 4.3-12.7 1.8-4.9 2.5-10.5 5.8-14.6 2-2.6 4.7-5.5 7.9-5.6 2.2 0 4.8 1.5 5.5 3.6 1 2.7-1 5.9-2.5 8.3-1.4 2.1-3.4 4.1-5.8 5-4 1.4-9.3-3.4-12.9-.2-6.7 6-11 9.6-19 16.6-.8.8-5.6.7-5-.2 8.7-11 14-25.5 22-38.2 1.6-2.4 5.2 2 7.3 1 .8-.5 1.5-1.7 1-2.4-.8-1.7-4.3.6-5.7-.8-1-1 .3-3-.4-4.4-.5-.9-2-3.8-2.5-2-1 3.3-2.8 5.3-5.3 6.6-2.1 1.2-7.3.8-7.3.8v0s-.4-2.4-1.3-2.8c-1.4-.6-2.5-1.3-4.4 1.3 0 0-3.4.9-3.1 2 .1 1 1.7.5 2.5.6 1.5.3 3 .8 4.4.9 3.2.3 8-2.7 9.7 0 3.4 5-3.8 11.8-7.3 16.8-2.3 3.2-6.2 2.9-8.5 8.1-3.9 8.7-10.7 15.8-16.5 12.1-1.5-1 1-5.1 1-5.1 2.8-11.3 18.1-16 12.7-22.8-.4-.5-.9-1.3-2 .5-7.1 12.8-3.6 3.9-6.5 7.2-2 2.3-5.4 2.7-8 4.2-4.3 2.4-8.8 4.8-12.8 7.7-1.4 1-3.6 1.5-3.8 3.2-.2 1.8 1.8 3.3 3.4 4.3 1 .7 2.4 1.3 3.5.8 2.2-1 2.8-4 3.2-6.3.5-3.5-1.5-6.8-1.6-10.3 0-2.8-.4-5.9.8-8.3 1.3-2.5 4-3.9 6.2-5.6 2.2-1.8 7.5-2.2 7-5.1-1.4-10-23.6-18.2-28.6-9.8-7 11.6-12.4 19.5-15.9 30.4-.9 2.8-2 6-1.2 8.9.7 2.8 2.3 6.7 5.2 7 3.3.2 5.2-4.4 7.3-7 3.3-4.3 6-9 7.7-14 .9-2.5 3.5-8.5 1.4-7.6-4.5 1.8-7.7 9.8-12.9 13.3-3.3 2.2-8.4 1.6-11.3 4.5-2.8 3-.2 11.1-4.3 11.5-1.2.1-1.6-1.8-1.8-3-.4-2.2 3.3-8 1.4-6.7-3 1.8-5.6 4.4-8.7 6-2.4 1.1-5 2.8-7.6 2.5-1.3-.1-3-.7-3.5-2-1.7-3.8 1.2-8.4 2.7-12.2 1.8-4.3 4.3-8.3 7.2-12 2-2.4 3.8-6.1 7-6.5 2.2-.2 5.1 1.4 5.9 3.6.7 2.3-1.3 4.7-2.6 6.7-1.7 2.7-3.7 5.8-6.8 7-2.2.8-6.5 1.9-7-.4-2-7 6.3-15.3 9.7-22.5 2.7-5.5 0-16.2-3.4-12.4-4.7 5.2-7.5 11.3-11.3 16.8-3.6 5.2-7.3 10.3-11.1 15.3-2.4 3-5 6-7.6 9-4 4.4-8 9-12.8 12.8C43.3 63 39 68.6 36 66.8c-2.4-1.4-2.4-4.5 0-8.3 4.5-7.2 10.3-10.4 14.4-20.4 3.2-7.7 10.4-13.8 12.5-22 .5-1.8.7-4 0-5.7-.4-1.1-1.8-3.6-2.4-2.6-4.1 7.3-4.2 16.6-10.5 21.6a248 248 0 00-29.7 29.3c-.9 1-3-.4-3.6-1.6-1-2.3 1.7-4.8 2.8-7.1 3-6 6.9-11.5 10.3-17.3 2.6-4.2 5.4-8.2 7.7-12.6 1.6-3 5.5-6 4-9-1.4-2.6-5.9-2-9-1.7-4 .4-7.5 2.9-11.2 4.7a76.8 76.8 0 00-10 5.8C9 21.7 5 22.9 4.3 26c-.6 2 .5 4.6 2 6.2a7.7 7.7 0 005.2 2.2c1.8 0 5-1.7 5-1.7">
<!-- Animation of the mask opening the word -->
<animate id="an"
attributeName="stroke-dashoffset"
begin="0s;an.end+2s"
dur="3s"
values="1100;0"
fill="freeze"
repeatCount="1"/>
</path>
</mask>
</defs>
<!-- The word is hidden by the mask -->
<path id="word" mask="url(#msk)" d="M79.7 29.1a344.4 344.4 0 01-20.4 23.4 152 152 0 01-13.8 12.6c-4.6 3.5-7.9 5.3-9.8 5.3h-.4c-2.9 0-4.8-1-5.6-3l-.2-1v-.6c0-2.2 1.8-6.5 5.5-12.8l7.8-14.3c-11.4 10.8-19 18.3-23 22.1-1.8 0-3.4-.6-4.8-1.8-.6-.7-.9-1.7-.9-2.9 0-2.3 1.8-6.5 5.4-12.6a6587 6587 0 0016.3-30.1h-.2A48.2 48.2 0 008.5 28.9v.1a5.5 5.5 0 002.5 2.9c1.5.5 3 .7 4.5.7l.9.1c0 .9-1.6 1.9-4.8 3.1-1.7.5-3.1.7-4.2.7h-.5c-2.5 0-4.2-2.8-4.9-8.4l-.1-1.6v-1.1a7 7 0 012.8-5.9c1.8-1.7 4.1-3.4 7-5.1 4-2.3 9.3-4.5 15.8-6.6A50 50 0 0139 6c1.5.2 2.9.8 4 1.8a7.9 7.9 0 012.6 5.9 1744.2 1744.2 0 01-17.5 32v.1l22.1-20.9C56 14 59.2 7.7 59.5 6.1c1.4.2 2.7.7 4 1.7a7.7 7.7 0 012.7 6.2v.1C49.7 44 41.2 59.4 40.8 60.4c1.8-1.6 4.3-4.2 7.7-7.8 9.4-10.6 18.4-22 27.2-34A79.7 79.7 0 0086.4 1l.1-1.1v-.1l.2-.1c1.5.4 3.1 1.4 4.9 3C93.4 5 94.4 6.8 94.4 8c-2.9 5.2-7.8 12.2-14.7 21.1zM125.8 40l-1.6 3-2 3.8-2.1 3.7c-1.8 3.2-3.2 5.7-4.1 7.6-1.5 2.8-4.1 3.4-7.7 2-1.5-.6-2.8-1.4-4-2.5a10.2 10.2 0 01-2.5-3.4l-3.6 6.6c-4.5-.4-6.3-2.4-5.6-6l-3 2.1a27.3 27.3 0 01-8.7 3.7l-1.8.2h-.4c-1.8 0-3.4-.7-4.7-2a10.6 10.6 0 01-2.1-6.6v-.6c0-3.1 1.1-7 3.2-11.5a36 36 0 0113.8-16.2l3-1.5 1.6-.6c.7 0 1.9.2 3.4.6l2.2.7c2.5 1.2 3.8 3 3.8 5.4v.4c0 1.6-.6 3.5-1.9 5.7a29.4 29.4 0 01-9.5 9.4l-8.3.2-1.6 2.4c-1.5 2.7-2.3 5-2.6 6.9.1.3.4.5.9.5h.1a45.5 45.5 0 0015.9-7.7l1.2-.9 1.4-2.6 4.5-8.3.7-1.4.8-1.4 1.6-2.9 3.2-5.9c5.4-9.8 8-15.1 7.9-15.9 2 .2 3.6 1 4.8 2.6a7 7 0 011.7 5.2l-11.9 21.5 3.3-3 1.7-1.5 1.7-1.6 6-5.4c4.6.4 6.4 2.6 5.4 6.6-.4 1.5-1.2 3.4-2.4 5.7l-.8 1.5-.9 1.4zm-40.4-1.2l4 .2a9 9 0 003.9-2.5 11.1 11.1 0 002.7-6.3c0-.7-.2-1.1-.6-1.3h-.2c-.8.1-1.8.7-3.1 1.8a93 93 0 00-2.9 2.8 48.8 48.8 0 00-3.8 5.3zm34.5-2.9l-13.6 11.5-.9.6-.4.6c.2 1.7.7 3 1.5 4 .9 1 1.8 1.4 3 1.1l10.4-17.8zm107.9 7.2v.6c0 1.2-.4 2.2-1.1 3h-.1c-.2-.7-.6-1.3-1.2-1.8a5 5 0 00-1.8-.5h-.6c-3.2 0-9.8 2.8-19.8 8.5-9 5.2-14.8 7.8-17.3 7.8h-.3c-3.4 0-5.6-1.9-6.7-5.6-.2-1.1-.4-2.2-.4-3.1v-.5c0-1.4.2-3 .6-4.6l-14.3 13-.9.8c-1.7 0-3.1-.5-4.4-1.5a4 4 0 01-1.1-2.6V56c0-1.7 1.3-5 4-9.8a659 659 0 01-16.1 14.5 9 9 0 01-4-1.1 3.7 3.7 0 01-1.8-3.2V56c0-2.2 1.5-5.8 4.4-10.9l2.2-3.9a93.5 93.5 0 00-7 3.3c.3 1.7.5 3.2.5 4.7v.3c0 3.4-.9 6.4-2.7 8.9a7 7 0 01-5.3 2.4h-.4a7.6 7.6 0 01-7-4.8c-.3-.9-.5-1.8-.5-2.5v-.4c0-.9.2-1.9.6-3l.3-.4c2.5-2 5-3.8 7.5-5.4-2-3.7-3-6-3-6.9v-1.1c0-3 1.6-6.3 4.8-9.8a35.2 35.2 0 0112.2-8.1 9 9 0 014.6 4c.4.6.7 1.3 1 2.1l.2.4c-2.8.9-5 1.8-6.8 2.9-4.9 2.8-7.4 6.2-7.4 10.2 0 .9.1 1.8.4 2.8 4.9-2.9 8.8-4.9 11.6-6l2.7-4.7a21 21 0 002.5-5.9h.1a7.3 7.3 0 015.5 3.5 7.8 7.8 0 011.1 3.7l-.1.3v.4l-4.2 7.5-5.2 9.1 12.1-11.1c.7-.4 1.4-.6 1.8-.6h.4l9-16.4h-.1l-6.4.2a2 2 0 01-.9-.9l-3.4 3.5a31.2 31.2 0 01-7-1.8v-.1l4-9.3 4.2-.3h1.2c2.7 0 5.3.3 7.8.8v.1l-4.9 5.1 7.3-.8c3-5.5 4.5-8.6 4.5-9.3 1.2 0 2.5.6 4.1 1.8a7.4 7.4 0 012.3 5.4c0 .4-.2 1-.6 1.6l2.6-.1h2.8l.1.2-1.9 4.3h-.1l-5.6-.4-16 28.7h.1l12.1-11.2h.1l2.5-4.4c1.1-1.6 2.6-3.4 4.5-5.4a23 23 0 015.4-4.3c1.4-.9 3-1.8 4.9-2.5l.4-.1c1.8 0 3.8.5 5.9 1.4 2.5 1.2 3.7 3 3.7 5.5 0 3.2-2 6.9-6 11.2a27.9 27.9 0 01-5.5 4.3l-.7.1-7.8.1c-2.1 2.8-3.5 6-4.2 9.4 0 .3.6.6 1.7.7l.7.1h.7c3.1 0 7.8-2.7 13.8-8.1 5.1-4.6 8.7-7.5 10.9-8.8 2-1.1 3.7-1.7 5.1-1.7 4.1 0 7 1.7 8.6 5 .4.9.5 1.8.5 2.5zm-35.5-4.6l4.1.1c1.1-.2 2.2-.9 3.4-2 2.1-2.3 3.1-4.6 3.1-6.9-.1-.8-.3-1.2-.7-1.2-2.8.8-6.1 4.2-9.9 10zm-57.5 9.4a34 34 0 00-2.7 2.3c-.6.6-1 1.2-1.4 1.8 1.5-.4 2.6-1 3.4-1.8.4-.5.6-1 .6-1.7v-.6z"/>
</svg>
</h3>
SVG mask + JS solution
Drawing a word, erasing a word by clicking on a button
var draw = true;
function play() {
var path = document.getElementById('path');
path.style.strokeDashoffset = (draw) ? '0' : '1109';
draw = !draw;
}
body {
height: 100vh;
width: 100%;
background-color:#6247D5;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
svg {
width: 40em;
}
#word {
fill:white;
}
#msk {
fill:none;
stroke:#fff;
stroke-width:12;
stroke-dasharray:1109px;
stroke-dashoffset:1109px;
}
<button onclick="play();">Play</button>
<h3>
<svg xmlns="http://www.w3.org/2000/svg" class="subtitle" viewBox="0 0 229.2 69.6">
<defs>
<mask id="msk">
<path id="path" d="M226.7 46.7s-.6-4-2-5.2a9 9 0 00-7.6-1.8c-3.6.8-5.7 4.7-8.7 7-3 2.1-6 4.4-9.3 6.3-3.2 1.7-6.5 3.6-10 4.3-1.9.4-5.3 1.6-5.6-.2-.8-3.7 2.8-8.5 4.3-12.7 1.8-4.9 2.5-10.5 5.8-14.6 2-2.6 4.7-5.5 7.9-5.6 2.2 0 4.8 1.5 5.5 3.6 1 2.7-1 5.9-2.5 8.3-1.4 2.1-3.4 4.1-5.8 5-4 1.4-9.3-3.4-12.9-.2-6.7 6-11 9.6-19 16.6-.8.8-5.6.7-5-.2 8.7-11 14-25.5 22-38.2 1.6-2.4 5.2 2 7.3 1 .8-.5 1.5-1.7 1-2.4-.8-1.7-4.3.6-5.7-.8-1-1 .3-3-.4-4.4-.5-.9-2-3.8-2.5-2-1 3.3-2.8 5.3-5.3 6.6-2.1 1.2-7.3.8-7.3.8v0s-.4-2.4-1.3-2.8c-1.4-.6-2.5-1.3-4.4 1.3 0 0-3.4.9-3.1 2 .1 1 1.7.5 2.5.6 1.5.3 3 .8 4.4.9 3.2.3 8-2.7 9.7 0 3.4 5-3.8 11.8-7.3 16.8-2.3 3.2-6.2 2.9-8.5 8.1-3.9 8.7-10.7 15.8-16.5 12.1-1.5-1 1-5.1 1-5.1 2.8-11.3 18.1-16 12.7-22.8-.4-.5-.9-1.3-2 .5-7.1 12.8-3.6 3.9-6.5 7.2-2 2.3-5.4 2.7-8 4.2-4.3 2.4-8.8 4.8-12.8 7.7-1.4 1-3.6 1.5-3.8 3.2-.2 1.8 1.8 3.3 3.4 4.3 1 .7 2.4 1.3 3.5.8 2.2-1 2.8-4 3.2-6.3.5-3.5-1.5-6.8-1.6-10.3 0-2.8-.4-5.9.8-8.3 1.3-2.5 4-3.9 6.2-5.6 2.2-1.8 7.5-2.2 7-5.1-1.4-10-23.6-18.2-28.6-9.8-7 11.6-12.4 19.5-15.9 30.4-.9 2.8-2 6-1.2 8.9.7 2.8 2.3 6.7 5.2 7 3.3.2 5.2-4.4 7.3-7 3.3-4.3 6-9 7.7-14 .9-2.5 3.5-8.5 1.4-7.6-4.5 1.8-7.7 9.8-12.9 13.3-3.3 2.2-8.4 1.6-11.3 4.5-2.8 3-.2 11.1-4.3 11.5-1.2.1-1.6-1.8-1.8-3-.4-2.2 3.3-8 1.4-6.7-3 1.8-5.6 4.4-8.7 6-2.4 1.1-5 2.8-7.6 2.5-1.3-.1-3-.7-3.5-2-1.7-3.8 1.2-8.4 2.7-12.2 1.8-4.3 4.3-8.3 7.2-12 2-2.4 3.8-6.1 7-6.5 2.2-.2 5.1 1.4 5.9 3.6.7 2.3-1.3 4.7-2.6 6.7-1.7 2.7-3.7 5.8-6.8 7-2.2.8-6.5 1.9-7-.4-2-7 6.3-15.3 9.7-22.5 2.7-5.5 0-16.2-3.4-12.4-4.7 5.2-7.5 11.3-11.3 16.8-3.6 5.2-7.3 10.3-11.1 15.3-2.4 3-5 6-7.6 9-4 4.4-8 9-12.8 12.8C43.3 63 39 68.6 36 66.8c-2.4-1.4-2.4-4.5 0-8.3 4.5-7.2 10.3-10.4 14.4-20.4 3.2-7.7 10.4-13.8 12.5-22 .5-1.8.7-4 0-5.7-.4-1.1-1.8-3.6-2.4-2.6-4.1 7.3-4.2 16.6-10.5 21.6a248 248 0 00-29.7 29.3c-.9 1-3-.4-3.6-1.6-1-2.3 1.7-4.8 2.8-7.1 3-6 6.9-11.5 10.3-17.3 2.6-4.2 5.4-8.2 7.7-12.6 1.6-3 5.5-6 4-9-1.4-2.6-5.9-2-9-1.7-4 .4-7.5 2.9-11.2 4.7a76.8 76.8 0 00-10 5.8C9 21.7 5 22.9 4.3 26c-.6 2 .5 4.6 2 6.2a7.7 7.7 0 005.2 2.2c1.8 0 5-1.7 5-1.7"
style="transition: stroke-dashoffset 3s ease-in-out; stroke-dashoffset: 1109;">
</path>
</mask>
</defs>
<!-- The word is hidden by the mask -->
<path id="word" mask="url(#msk)" d="M79.7 29.1a344.4 344.4 0 01-20.4 23.4 152 152 0 01-13.8 12.6c-4.6 3.5-7.9 5.3-9.8 5.3h-.4c-2.9 0-4.8-1-5.6-3l-.2-1v-.6c0-2.2 1.8-6.5 5.5-12.8l7.8-14.3c-11.4 10.8-19 18.3-23 22.1-1.8 0-3.4-.6-4.8-1.8-.6-.7-.9-1.7-.9-2.9 0-2.3 1.8-6.5 5.4-12.6a6587 6587 0 0016.3-30.1h-.2A48.2 48.2 0 008.5 28.9v.1a5.5 5.5 0 002.5 2.9c1.5.5 3 .7 4.5.7l.9.1c0 .9-1.6 1.9-4.8 3.1-1.7.5-3.1.7-4.2.7h-.5c-2.5 0-4.2-2.8-4.9-8.4l-.1-1.6v-1.1a7 7 0 012.8-5.9c1.8-1.7 4.1-3.4 7-5.1 4-2.3 9.3-4.5 15.8-6.6A50 50 0 0139 6c1.5.2 2.9.8 4 1.8a7.9 7.9 0 012.6 5.9 1744.2 1744.2 0 01-17.5 32v.1l22.1-20.9C56 14 59.2 7.7 59.5 6.1c1.4.2 2.7.7 4 1.7a7.7 7.7 0 012.7 6.2v.1C49.7 44 41.2 59.4 40.8 60.4c1.8-1.6 4.3-4.2 7.7-7.8 9.4-10.6 18.4-22 27.2-34A79.7 79.7 0 0086.4 1l.1-1.1v-.1l.2-.1c1.5.4 3.1 1.4 4.9 3C93.4 5 94.4 6.8 94.4 8c-2.9 5.2-7.8 12.2-14.7 21.1zM125.8 40l-1.6 3-2 3.8-2.1 3.7c-1.8 3.2-3.2 5.7-4.1 7.6-1.5 2.8-4.1 3.4-7.7 2-1.5-.6-2.8-1.4-4-2.5a10.2 10.2 0 01-2.5-3.4l-3.6 6.6c-4.5-.4-6.3-2.4-5.6-6l-3 2.1a27.3 27.3 0 01-8.7 3.7l-1.8.2h-.4c-1.8 0-3.4-.7-4.7-2a10.6 10.6 0 01-2.1-6.6v-.6c0-3.1 1.1-7 3.2-11.5a36 36 0 0113.8-16.2l3-1.5 1.6-.6c.7 0 1.9.2 3.4.6l2.2.7c2.5 1.2 3.8 3 3.8 5.4v.4c0 1.6-.6 3.5-1.9 5.7a29.4 29.4 0 01-9.5 9.4l-8.3.2-1.6 2.4c-1.5 2.7-2.3 5-2.6 6.9.1.3.4.5.9.5h.1a45.5 45.5 0 0015.9-7.7l1.2-.9 1.4-2.6 4.5-8.3.7-1.4.8-1.4 1.6-2.9 3.2-5.9c5.4-9.8 8-15.1 7.9-15.9 2 .2 3.6 1 4.8 2.6a7 7 0 011.7 5.2l-11.9 21.5 3.3-3 1.7-1.5 1.7-1.6 6-5.4c4.6.4 6.4 2.6 5.4 6.6-.4 1.5-1.2 3.4-2.4 5.7l-.8 1.5-.9 1.4zm-40.4-1.2l4 .2a9 9 0 003.9-2.5 11.1 11.1 0 002.7-6.3c0-.7-.2-1.1-.6-1.3h-.2c-.8.1-1.8.7-3.1 1.8a93 93 0 00-2.9 2.8 48.8 48.8 0 00-3.8 5.3zm34.5-2.9l-13.6 11.5-.9.6-.4.6c.2 1.7.7 3 1.5 4 .9 1 1.8 1.4 3 1.1l10.4-17.8zm107.9 7.2v.6c0 1.2-.4 2.2-1.1 3h-.1c-.2-.7-.6-1.3-1.2-1.8a5 5 0 00-1.8-.5h-.6c-3.2 0-9.8 2.8-19.8 8.5-9 5.2-14.8 7.8-17.3 7.8h-.3c-3.4 0-5.6-1.9-6.7-5.6-.2-1.1-.4-2.2-.4-3.1v-.5c0-1.4.2-3 .6-4.6l-14.3 13-.9.8c-1.7 0-3.1-.5-4.4-1.5a4 4 0 01-1.1-2.6V56c0-1.7 1.3-5 4-9.8a659 659 0 01-16.1 14.5 9 9 0 01-4-1.1 3.7 3.7 0 01-1.8-3.2V56c0-2.2 1.5-5.8 4.4-10.9l2.2-3.9a93.5 93.5 0 00-7 3.3c.3 1.7.5 3.2.5 4.7v.3c0 3.4-.9 6.4-2.7 8.9a7 7 0 01-5.3 2.4h-.4a7.6 7.6 0 01-7-4.8c-.3-.9-.5-1.8-.5-2.5v-.4c0-.9.2-1.9.6-3l.3-.4c2.5-2 5-3.8 7.5-5.4-2-3.7-3-6-3-6.9v-1.1c0-3 1.6-6.3 4.8-9.8a35.2 35.2 0 0112.2-8.1 9 9 0 014.6 4c.4.6.7 1.3 1 2.1l.2.4c-2.8.9-5 1.8-6.8 2.9-4.9 2.8-7.4 6.2-7.4 10.2 0 .9.1 1.8.4 2.8 4.9-2.9 8.8-4.9 11.6-6l2.7-4.7a21 21 0 002.5-5.9h.1a7.3 7.3 0 015.5 3.5 7.8 7.8 0 011.1 3.7l-.1.3v.4l-4.2 7.5-5.2 9.1 12.1-11.1c.7-.4 1.4-.6 1.8-.6h.4l9-16.4h-.1l-6.4.2a2 2 0 01-.9-.9l-3.4 3.5a31.2 31.2 0 01-7-1.8v-.1l4-9.3 4.2-.3h1.2c2.7 0 5.3.3 7.8.8v.1l-4.9 5.1 7.3-.8c3-5.5 4.5-8.6 4.5-9.3 1.2 0 2.5.6 4.1 1.8a7.4 7.4 0 012.3 5.4c0 .4-.2 1-.6 1.6l2.6-.1h2.8l.1.2-1.9 4.3h-.1l-5.6-.4-16 28.7h.1l12.1-11.2h.1l2.5-4.4c1.1-1.6 2.6-3.4 4.5-5.4a23 23 0 015.4-4.3c1.4-.9 3-1.8 4.9-2.5l.4-.1c1.8 0 3.8.5 5.9 1.4 2.5 1.2 3.7 3 3.7 5.5 0 3.2-2 6.9-6 11.2a27.9 27.9 0 01-5.5 4.3l-.7.1-7.8.1c-2.1 2.8-3.5 6-4.2 9.4 0 .3.6.6 1.7.7l.7.1h.7c3.1 0 7.8-2.7 13.8-8.1 5.1-4.6 8.7-7.5 10.9-8.8 2-1.1 3.7-1.7 5.1-1.7 4.1 0 7 1.7 8.6 5 .4.9.5 1.8.5 2.5zm-35.5-4.6l4.1.1c1.1-.2 2.2-.9 3.4-2 2.1-2.3 3.1-4.6 3.1-6.9-.1-.8-.3-1.2-.7-1.2-2.8.8-6.1 4.2-9.9 10zm-57.5 9.4a34 34 0 00-2.7 2.3c-.6.6-1 1.2-1.4 1.8 1.5-.4 2.6-1 3.4-1.8.4-.5.6-1 .6-1.7v-.6z"/>
</svg>
</h3>