Sometimes we need simple animations and end up reaching for heavier solutions like entire JavaScript libraries or overly complex CodePen demos when we could use SVG alone.
SVG is a world apart from the web stack. Although the best-known use is icons, it's an excellent platform for everything from animations to page transitions.
Inspiration
I found this tweet showing the animateMotion property — I had never heard of it.
https://twitter.com/PaulieScanlon/status/1624905433306566656
I decided to make my own example and read more about the property on MDN. Basically animateMotion tells an SVG element to follow the path of another element.
Trying a different shape
I wanted a different drawing — like a race on a track — so I found an SVG of the Interlagos circuit in São Paulo and a separate race car SVG. I combined them in Figma, exported a new SVG, and built a group with 3 different cars each with animateMotion, a begin attribute for staggered start, and rotate="auto" so the car turns along the path.
Improvements
It's far from perfect — I don't know SVG deeply and just wanted to see the animation work. I'd like the cars 100% inside the track and not leaving the canvas at the edges. If you know how, get in touch!