Path Follow
PrimitivesA marker travels an SVG route, banking into curves because its rotation comes from the path tangent rather than a separate animation
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 4 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Labellabel · string
Small mono label above the path. Keep it to one or two words.
now: Route
- Waypointswaypoints · number
Dots placed along the route that light up as the marker passes them.
now: 4
- Trailtrail · number
Fading dots left behind the marker. Zero disables the trail.
now: 14
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: slate
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
An element travelling along a curving SVG path with correct auto-rotation from the tangent, drawing the route as it goes, leaving a fading trail, with waypoints that light up as it passes them.
