OrbitingMarks
The clear mark travelling a ring. One ring, one mark held level as it goes round, one css rotation and nothing per frame. depth nests more marks inside the ring.
The mark on the ring
The mark is the clear bars clipped to a disc, drawn once in defs and placed with use. The disc's trip round the ring is one css rotation on an svg group, and a second rotation the other way about the disc's own centre cancels the first, so the bars keep their bearing while the disc travels. Nothing runs per frame, and reduced motion parks it.
<Box width="100%" maxWidth={300}>
<OrbitingMarks />
</Box>Depth
depth nests more marks inside the ring. Each disc is 0.62 of the one before it and keeps the same touch point at the centre, so the first always reaches the ring. Two bar fields on top of each other turn to moire, so each clip subtracts the next disc and the stack reads as crescents around the innermost mark.
<OrbitingMarks size={160} depth={1} />
<OrbitingMarks size={160} depth={2} />
<OrbitingMarks size={160} depth={4} />Rigid rotation
upright={false} drops the counter-lap, so the bars turn with the group and the whole figure rotates as one rigid piece. The first here is the default, level; the second turns with the stack.
<OrbitingMarks size={200} />
<OrbitingMarks size={200} upright={false} />Tone
Foreground ink by default. The ring takes the same ink at a third. Inverse ink for a foreground ground, current inherits the parent's color.
<Box backgroundColor="foreground" padding="6">
<OrbitingMarks tone="inverse" size={200} />
</Box>Period
Seconds for one lap. Twenty-five by default, slow enough to read as drift rather than spin.
<OrbitingMarks size={200} period={8} />Props
OrbitingMarks is an svg, hidden from assistive tech: it decorates, it says nothing. Every svg attribute passes through.
Width in px. By default the graphic fills its container and stays square.
Foreground ink, inverse ink for a foreground ground, or the parent's color.
Seconds for one lap of the ring.
How many marks nest inside the ring.
Hold the marks level: each disc gets the opposite rotation about its own centre, so the bars keep their bearing while the disc travels. false lets them turn with the stack.