← Creative
🔮
Kaleidoscope Generator
Drag your mouse and watch every stroke mirror itself into a mesmerizing symmetric pattern.
🟢 EasyDifficulty
2-3 hoursTime
JavaScript, TypeScriptLanguages
What you're building
A drawing canvas where every line you draw is automatically mirrored around a center point multiple times, instantly turning random mouse scribbles into satisfying symmetric kaleidoscope art. You'll control the number of mirrored segments, the color, and the brush size — and watch simple trigonometry turn into genuinely beautiful generative art.
What you'll unlock 🔓
You'll need
- Basic JavaScript
- Basic Canvas drawing
- A code editor
- A browser
🗺️ Build roadmap
01 Set up a full-size canvas and track the mouse
→
02 Draw a single line following the cursor
→
03 Rotate the canvas around the center to add one mirror segment
→
04 Loop the rotation to create full radial symmetry
→
05 Add a segment count slider
→
06 Add color and brush size controls
→
07 Add clear and save-as-image buttons
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free