An open-source web component for generating moving, highlightable, screen-reader-friendly text path animations

You should check out the GitHub repository and watch the video tutorial!

<svg class="legit-marquee" viewBox="0 20 634 149"
  content="Hello there!"
  pathd="m-20.66501,119.8335c146,-5 158,-32 231,-41c73,-9 189,44 294,45c105,1 142,-50 207.66501,-58.8335"

<script src="https://cdn.jsdelivr.net/gh/olivernorred/legit-marquees/legit-marquees.js">

The script at the bottom injects svg text objects into the svg and animates them along the specified path.

See the Pen by Oliver Norred (@olivernorred) on CodePen.

Three legit-marquees stacked lets you style each one differently. They each have the same path and content with different amounts of leading `&nbsp;`s You may be able to do the same thing with some JavaScript trickery where you split up the words in the text objects, but this is the easiest way IMHO.

I would love to see what you can make with it!

← more from my portfolio