Last update: July 19, 2021

How to animate a text along a path

Your website sucks big time!!!

It's all about the SVG format and a little bit of CSS. No Javascript and no external libs to load.

All we have to do is to create some shapes, with Illustrator or some other softwares (weirdly, the generated SVG from Affinity Designer makes it harder to work with).

Here is how the SVG looks like:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="301" height="21" viewBox="0 0 301 21">
<defs><style>.cls-1{fill:none;stroke:#231f20;stroke-miterlimit:10;}</style></defs>
<path class="cls-1" d="M0,.5c30.0978,0,30.0978,20,60.1956,20S90.2948.5,120.394.5s30.1,20,60.2,20c30.1015,0,30.1015-20,60.203-20s30.1014,20,60.2029,20"/>
</svg>

First, let's do a little bit of cleaning, so we only keep what is really important here:

We remove some unnecessary style (everything inside the <defs> element), the default ID and Class names, so we can add our owns.

The most important is to add an ID to the path  as it will be used in the next step : 
<path id="wavepath"...

 

<svg class="svgwave" xmlns="http://www.w3.org/2000/svg" width="301" height="21" viewBox="0 0 301 21">
<path id="wavepath" d="M0,.5c30.0978,0,30.0978,20,60.1956,20S90.2948.5,120.394.5s30.1,20,60.2,20c30.1015,0,30.1015-20,60.203-20s30.1014,20,60.2029,20"></path>
</svg>

Adding the text

It's still a part of the SVG, so we add a <textPath> element, inside a <text> element.

Notice the href : It's the same reference as the ID we have just chosen for the path.

<svg class="svgwave" xmlns="http://www.w3.org/2000/svg" width="301" height="21" viewBox="0 0 301 21">
<path id="wavepath" d="M0,.5c30.0978,0,30.0978,20,60.1956,20S90.2948.5,120.394.5s30.1,20,60.2,20c30.1015,0,30.1015-20,60.203-20s30.1014,20,60.2029,20"></path>

<text text-anchor="middle">
<textPath class="my-text" href="#wavepath" startOffset="50%">
Your website sucks big time!!!
</textPath>
</text>

</svg>

Adding the CSS

If you want to hide the path and only keep the text visible, you can simple modify the stroke properties : stroke:transparent; stroke-width:0px;

svg.svgwave {
    width: 100%;
    height: auto;
    overflow: visible;
}

svg.svgwave path {
    fill:transparent;
    stroke:red;
    stroke-width:1px;
}

svg.svgwave text {
    font-size:20px;
    fill: white;
}
Your website sucks big time!!!

Adding the animation

We only have to add one line inside the <textPath> :

<animate attributeName="startOffset" from="-50%" to="150%" begin="0s" dur="3s" repeatCount="indefinite"></animate>

Copy the following SVG in a Code Block (that has a width of 100%) , add the CSS, and you should see the same animation as the one at the top of this page.

<svg class="svgwave" xmlns="http://www.w3.org/2000/svg" width="301" height="21" viewBox="0 0 301 21">
<path id="wavepath" d="M0,.5c30.0978,0,30.0978,20,60.1956,20S90.2948.5,120.394.5s30.1,20,60.2,20c30.1015,0,30.1015-20,60.203-20s30.1014,20,60.2029,20"></path>

<text text-anchor="middle">
<textPath class="my-text" href="#wavepath" startOffset="50%">
<animate attributeName="startOffset" from="-50%" to="150%" begin="0s" dur="3s" repeatCount="indefinite"></animate>
Your website sucks big time!!!
</textPath>
</text>

</svg>
🐙Your website sucks big time!!!🐳

More info : https://alligator.io/svg/textpath/

More shape available in my design set Unlimited Elements

Your life sucks and you know it!
Your partner is cheating on you!
closealign-justifychevron-downcaret-up