Topographic Lines
Contour rings that rotate against each other so slowly the map feels tectonic.
Build a topographic-lines background in SVG. The rings: 6 concentric closed contours around an off-center point. Generate each as a wobbly circle: sample ~26 points around the circle and modulate the radius with two sine terms (3 lobes + 5 lobes, different phase per ring - use the ring index as the seed, never Math.random), then connect with quadratic curves for smoothness. The wobble makes them read as elevation lines, not circles. Styling: hairline ink strokes at ~22% opacity, 0.8px wide. One middle ring is the accent color at 1.2px - the marked elevation. Motion: each ring rotates around the shared center, alternating direction ring by ring, with periods from ~26s (innermost) up to ~66s (outermost). The counter-rotation of neighboring rings is what makes the field feel alive; the speeds are so slow it should be felt, not watched. A tiny monospace caption in a corner ("elevation 47m") gives it a wink of authenticity. Accessibility: the SVG is decorative - aria-hidden; under prefers-reduced-motion the rings hold still. Keep total stroke contrast low so foreground text stays readable. Colors as tokens: paper, ink strokes, one accent ring. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.