Quantum Fibonacci

Golden-angle phyllotaxis blooming from a single seed, jittered by a probability wave.

Plate 01golden-ratio

Width

Waiting for the animation above to load…

What lands in the file, and what the width does

One click writes whatever the animation is drawing at that moment to a PNG, with the drawmycanvas.com mark drawn into the picture rather than laid over it. Leave the width box empty and you get the stage exactly as your browser rasterised it — your window’s width times its device pixel ratio, which is about 1,600 px across from a 1280‑px window on a HiDPI laptop and about 353 px from a 390‑px phone.

Type a width instead, or take a preset, and the frame is redrawn into a canvas that wide: the height follows the stage’s own shape and the mark scales with it. The stage is 16:9 on a wide window and 4:3 below 560 px, so a width of 1200 saves 1200×675 on a laptop and 1200×900 on a phone. 1200 px is the width Open Graph and X link cards are cut from — the canonical card is 1200×630, and a card crops the extra height rather than letterboxing it.

Honest limits. Asking for more pixels than the stage was drawn at resamples pixels that were never drawn: a 1920‑px file exported from a 353‑px phone stage is bigger, not sharper. A very large width is a real memory allocation and a browser is allowed to refuse it; when that happens the line above says so plainly and nothing else on the page changes. PNG only — no JPEG, no WebP, no animated export. And nothing is uploaded: the picture is assembled in your own browser, so no frame of this plate ever reaches us.

Live on an HTML canvas · vanilla JavaScript · no dependencies Open fullscreen

About this piece

Quantum Fibonacci is built on one of nature’s favourite numbers: the golden angle, roughly 137.5°. Place a dot, turn by that angle, step a little further out, and repeat a few hundred times. What you get is phyllotaxis — the exact spiral packing a sunflower uses to fit the most seeds into the least space, and the same one you’ll find in pinecones, pineapples and daisy heads.

On top of that tidy lattice this piece adds a playful nod to quantum mechanics. Each point carries a probability that rises and falls on a sine wave, so dots fade in and out as if being observed, and a faint “uncertainty” wobble nudges them off the perfect spiral. A handful of entangled pairs draw a thin thread to their mirror point across the seed.

What to look for

Look for the parastichies — the clockwise and counter-clockwise spiral arms your eye traces through the dots. Count them and you’ll almost always land on consecutive Fibonacci numbers (8 one way, 13 the other), which is why the golden angle and the Fibonacci sequence are two views of the same thing.

Because the radius grows as the square root of the index, the bloom stays evenly dense from centre to rim instead of crowding or thinning out.

Curious how the loop and canvas fit together? Read how it works →

<iframe src="https://drawmycanvas.com/embed/quantum-fibonacci.html"
        width="100%" height="600"
        frameborder="0"
        title="Quantum Fibonacci — Draw My Canvas"></iframe>

Paste it into any HTML page.

Under the hood

AlgorithmGolden angle φ · phyllotaxis
TechniqueRadial gradients, additive blend
MotionSlow rotation + probability wave
PaletteCobalt → coral spectrum

By default the animation follows the reader’s own light/dark setting. An embed is a cross-origin iframe, so it cannot see your page’s CSS or your theme toggle — it reads the visitor’s browser prefers-color-scheme instead. One visitor gets the warm paper, the next gets the near-black one, on the very same page of yours. To pin it, add ?theme=light or ?theme=dark to the iframe src — the parameter overrides the reader’s setting. Choose a state below and the snippet above is rewritten, displayed and copied alike.

A second parameter, ?ink=, recolours the marks. It takes a bare six-digit hex with no # — a # starts a URL fragment and never reaches the page — so a gold version of this plate ends ?theme=dark&ink=E7B24A. It replaces the three cobalt slots of the four-ink palette and deliberately leaves the fourth, the coral accent, alone: that 3:1 weighting is what the drawing is, and flattening it to one colour turns a composition into a monochrome scribble. It does not touch the background, the watermark or its shadow — those are the contrast that keeps the attribution readable, and the background stays under ?theme=. And nothing here detects your brand: an embed is a cross-origin iframe, it cannot read a single byte of your CSS, so the colour is whatever hex you type and nothing else. A malformed or missing value is ignored in silence and you get the standard cobalt.

Colour of the embedded animation

Follow the reader’s setting Always light Always dark

No parameter: every reader sees the animation in whichever mode their own device is set to.

Colour of the marks

Pick

No colour chosen: the marks stay cobalt and coral. A colour here repaints the marks only — the background keeps following the theme control above.

More from the gallery

All 22 animations in the gallery →