Cycle diagram

Make it fit your project.

Build a ten-second circular process diagram with four labeled nodes. Reveal nodes in order, connect them with directional arcs, and move a single marker through one complete cycle. Stop movement after the cycle and hold the labeled diagram.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Build a ten-second circular process diagram with four labeled nodes. Reveal nodes in order, connect them with directional arcs, and move a single marker through one complete cycle. Stop movement after the cycle and hold the labeled diagram.
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.

• Keep the reading order clear and provide a linear text equivalent.
• 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.