chartsAndDataViz
Travelling beam diagram
The light does not move along the wire: the gradient does. A linearGradient's coordinates are attributes and CSS cannot animate them, so two SMIL animate tags shift x1 and x2 together. And every connector needs its OWN gradient, because with userSpaceOnUse the coordinates are absolute and a shared one would drive all five beams from the same place.
See it live and copy its promptWhat you can adjust
- Background
- Track colour
- Head color
- Icon color
- Beam length
- Turn duration
- Hub size
How this catalog works
Every component ships with its reproduction prompt: the text you paste into an AI builder to get exactly this piece. The values above are editable, and the prompt you copy carries the ones you chose, so what gets generated is what you were looking at.
