Generative Geometry

Strange Attractor

De Jong strange attractor rendered as a smoky pink density cloud on deep purple; coefficients drift via sine clocks so the shape continuously morphs.

canvasheavy complexitymoderate motionpointer

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, generative art displays, screensavers, or anywhere a continuously evolving mathematical form adds depth.

When not to

Light backgrounds (hardcoded dark purple). Low-end devices — 90k iterations per frame with pixel-level tone mapping is CPU-intensive.

Working with an AI agent

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

Change accent color from pink (#ff5d8f) to electric cyan (#00eaff) by updating the rgb values in the r/g/bl tone-map lines (target 0,234,255), and slow the drift by reducing t += 0.0032 to t += 0.0015. 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

ITER iteration count (90000)
drift speed (t += 0.0032)
clock amplitude (0.85)
accent color in tone-map r/g/bl lines
smoke fade factor (v * 0.90)
scale factor (0.24)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

IIFE wrapper
prefers-reduced-motion guard (static single frame)
visibilitychange stop/start
DPR-aware canvas sizing
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

90k iterations per frame is CPU-bound — heavy on low-end mobile
Background color hardcoded in CSS (#11001f) — must edit both CSS and tone-map bg values to recolor
Click nudge only shifts t; no visual feedback of state change

attractorgenerativecanvasparticle-densitymathambientdark

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.
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.