How to animate a text along a path

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:

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"...

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.

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;
}

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.

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

More shape available in my design set Unlimited Elements