Contour field

Make it fit your project.

Build a Canvas background with twenty nested closed contours sampled at 120 angles each. Modulate each radius with low-frequency periodic waves, vary line opacity by ring, and animate the phase slowly. Keep stroke thickness stable across resolution changes.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Build a Canvas background with twenty nested closed contours sampled at 120 angles each. Modulate each radius with low-frequency periodic waves, vary line opacity by ring, and animate the phase slowly. Keep stroke thickness stable across resolution changes.
3. Expose seek(t) so frames can be inspected deterministically; add play, pause, replay, and a reduced-motion still.
4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

• Limit contour contrast behind text and stop drawing when the scene leaves the viewport.
• The prompt guides a coding agent; output quality depends on its implementation and review.

Want us to build it?

Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.