∞ forever components

Generative Geometry

Rotating Mandala

12-fold mandala of 5 nested polygon rings that counter-spin, breathe in scale, and cycle through lilac-gold hues. Tap adds a spin impulse.

canvasmedium complexitymoderate motionclick

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Ambient backgrounds for creative or generative art contexts. Hero sections needing mesmerizing looping visuals with subtle user interactivity.

When not to

Light-background UIs (background hardcoded dark lilac-charcoal). Layouts where continuous motion competes with foreground text.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change symmetry from 12 to 8 by setting sym=8, increase ring count to 7, and shift hue base by changing the formula to (t*0.02+ring*45+20)%360. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • symmetry count (sym=12)
  • ring count (ring<5)
  • rotation speed (t*0.0003 multiplier)
  • hue cycle rate (t*0.02+ring*55)
  • breathe depth (Math.sin*0.06)
  • polygon sides formula (3+ring)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (reduce branch)
  • visibilitychange pause/resume
  • DPR-aware canvas sizing
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in CSS (#1B191D) — must edit to change from dark lilac-charcoal
  • Reduced-motion renders a single static frame only
  • Spin impulse on pointerdown decays (spin*=0.96) — no persistent user control

mandalagenerativecanvaspolygonradial-symmetrybreathingcounter-spin

More Generative Geometry components

  • Voronoi Shatter14 drifting sites partition the canvas into cool-blue Voronoi mosaic cells; moving the pointer nudges the nearest site toward the cursor.
  • Auto-MazeDepth-first maze carves itself wall by wall on a dark grid with shifting hue; a bright dot marks the active cell. Resets with a new color on completion.
  • Truchet Tiles8x8 grid of rainbow quarter-arc Truchet tiles that flip orientation in slow sine waves, weaving shifting interlocked curves across a dark background.
  • SpirographA hypotrochoid spirograph traced progressively on canvas with a shifting hue; each cycle completes then resets with new random radii and color.
  • L-System PlantAn L-system fractal plant grows branch by branch from the canvas bottom, swaying gently; clicking triggers a wobble and regrows a randomized plant.
  • Moiré InterferenceThree drifting concentric ring sets in cyan, pink, and green blend additively to create shifting moiré patterns. Pointer steers one ring center.