Generative Geometry
L-System Plant
An L-system fractal plant grows branch by branch from the canvas bottom, swaying gently; clicking triggers a wobble and regrows a randomized plant.
canvasmedium complexitymoderate motionclickmobile-ready
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
Nature or generative art backgrounds, procedural demo showcases, ambient desktop wallpaper loops.
When not to
Layouts requiring legible text overlays — the incremental draw loop repaints constantly. Low-end devices with very small viewports may stutter during grow phase.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Change hue base to 200 for a blue-teal palette, increase L-system iterations from 4 to 5, and slow growth speed by changing grow+=0.006 to grow+=0.003. 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
- hue base (hue=90+Math.random()*60)
- branch angle range (baseAngle=20+Math.random()*12)
- growth speed (grow+=0.006)
- segment length (len=s*0.018)
- L-system iteration count (i<4)
- leaf dot radius (arc radius 1.6)
- 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 in resize()
- theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
Known limitations
- L-system string for 4 iterations is long — bumping to 5+ iterations may cause jank during the grow phase
- No aria role on canvas; purely decorative with no keyboard interaction
- sway wobble resets on every pointerdown but does not animate smoothly back to zero on slow devices
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.
- Rotating Mandala12-fold mandala of 5 nested polygon rings that counter-spin, breathe in scale, and cycle through lilac-gold hues. Tap adds a spin impulse.
- Moiré InterferenceThree drifting concentric ring sets in cyan, pink, and green blend additively to create shifting moiré patterns. Pointer steers one ring center.