legit-marquees

An open-source web component for generating stylable, 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!"
  contentrepeat="1"
  speed="4"
  textsize="50"
  pathd="m-20.66501,119.8335c146,-5 158,-32 231,-41c73,-9 189,44 294,45c105,1 142,-50 207.66501,-58.8335"
  >
</svg>

<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!

For the code-averse: legit marquee maker!

Sure, you can get more functionality by making it yourself, but this user interface gives those new to coding a foot in the proverbial door. I think the best way to use it is to generate an unrefined version of the code, and edit the viewbox, textsize, speed, and content later on.

a screenshot of the legit marquee maker

Legit Marquees User Showcase!

rileyhuston.xyz

By Riley Huston, capture taken February 2023



← more from my portfolio