∞ forever components

Stained Glass

Kaleidoscope Mandala

Three concentric rings of colored segments spin at different speeds; a pulsing jewel center and hue-sweep filter create a stained-glass kaleidoscope.

svglight complexityintense motion

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

Dark-mode hero backgrounds, loading screens, meditation or creative-app branding where strong continuous motion is welcome.

When not to

Contexts where users need to focus on content — constant rotation and hue sweep will compete with any text overlay.

Working with an AI agent

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

Change the outer ring rotation speed from 8s to 16s by setting the km-outer animation duration, and shift the palette to cool blues by replacing #c8860a with #00bfff throughout the SVG path fills. 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

  • outer ring speed (8s in #km-outer animation)
  • mid ring speed (5s in #km-mid animation)
  • inner ring speed (3s in #km-inner animation)
  • segment fill colors (hex values on each path)
  • hue-rotate range in km-hue keyframe (90deg)
  • jewel center circles (radii and fill colors)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • reduced-motion guard (disables all animations via animation:none)
  • transform-origin:250px 250px on each rotating group
  • stacking order: outer -> mid -> inner -> pulse
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • visibilitychange listener registered but does nothing — no actual pause on tab hide
  • Palette changes require hand-editing SVG path fills; no JS-driven color generation
  • Simultaneous CSS filter stacking (hue + pulse) may compound unexpectedly on some browsers

kaleidoscopemandalastained-glassrotationsvgambientjewel

More Stained Glass components

  • Gothic Lancet TriptychThree gothic lancet arches with jewel-toned panes hue-shift at independent rates; a warm light beam sweeps across and trefoils pulse overhead.