Loading…
Live CSS loop · move your pointer
Open ↗Premiummirrored wedge kaleidoscope · dark · css
Mirror Wedges
A kaleidoscope built from CSS wedges: one moving blob of colour, clipped into a triangular slice and mirrored around the centre as many times as there are segments, so every drift of the blob unfolds into a symmetrical mandala. The pointer steers the blob, so you turn the kaleidoscope by hand.
How to use it
Run the real thing here, tune it, then copy the prompt that rebuilds it.
- 01Launch and look
The preview is the shipped loop itself: CSS, SVG or Canvas 2D, a few kilobytes, no WebGL.
- 02Dial it in
Swatches recolour, sliders change density and speed, toggles switch parts on and off. Randomize for a surprise.
- 03Pick your stack
A snippet for any page, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the loop verbatim with your CONFIG values baked in, plus the integration rules.
- 05Drop it behind a section
Container gets position: relative and overflow: hidden; the background fills it; content sits above.
