flowshape

flowshape.art — turn mathematics into art.

Explore 40 pattern generators, read the maths that draws each one, and take the result out as a print-ready poster or as a visual that moves with your music.

Free, open source, no accounts, no backend. Everything runs in the browser.

Léeme en español

---

What's new

v1.2.0 — a curated gallery. Hand-picked work at flowshape.art/#/gallery, in three tabs: designs, posters and recordings from the animated stage. Posters are live composer URLs rather than exported images, so they stay crisp at any size and open in the composer at that exact state. Videos play full length with sound, on click rather than on scroll.

v1.1.0 — keep and share. Save any design, poster or animation and find it again at #/saved — rename, delete, and export the collection as JSON to carry between browsers. A share control on every view hands over the link that reproduces exactly what you are looking at.

Both are built on the same idea as everything else here: a saved favourite is a URL, so nothing about the artwork is duplicated and nothing can drift out of date.

---

What it is

flowshape turns mathematics into art. Pick one of 40 deterministic pattern generators — a Voronoi mesh, a Truchet tiling, a flow field, an isometric voxel form — move every parameter it has, and watch the shape respond.

Then take it somewhere:

• Print. Export the bare pattern as SVG or PNG at any paper size. The SVG opens cleanly in Figma, Illustrator, Inkscape or Canva, so the finishing work happens in whatever tool you already use.
• Compose. Or set the pattern into a designed sheet — artwork field, title block, parameter table, accent mark — and browse composed layouts with an arrow key. flowshape still isn't an element-level editor: you pick from validated compositions rather than dragging boxes. See the poster composer.
• Keep. Star anything worth returning to and it waits for you at #/saved — designs, posters and animations together, renameable, exportable as a file.
• Motion. Feed the same pattern audio — a file or the microphone — and it moves with the sound on a 16:9, 9:16 or 1:1 stage. Record it and download a video file with your audio in it. See the animated stage.

Two things make it more than a toy:

• The URL is the state. Pattern id, every parameter, seed, colour and format are encoded in the address bar. Copy the link and anyone gets the identical artwork, byte for byte. There is no account and no server — anything you choose to keep is saved in your own browser.
• The maths and the code are both on the page. Every pattern exposes the actual formula that draws it, a plain-language reading of that formula, a note on what each parameter does, a real citation — and the generator's own source, unedited.

Inside every pattern

Each pattern in the playground has three views.

1 · The artwork. Live SVG, regenerated on every slider move, deterministic from the URL.

2 · Explain the math. Not a marketing gloss — the equation the code implements, in English and Spanish, with the primary source cited. Phyllotaxis, for example:

θₙ = n · α                  (α ≈ 137.50776°, the golden angle)
rₙ = s · n^p                (p = 0.5 in Vogel's original model)
s  = R / (N − 1)^p          (R = maximum radius available in the frame)

Every point n is placed at angle n·α and radius rₙ = s·n^p. Because α is the golden angle — the turn that splits a full circle in the golden ratio — no finite number of points ever lands back on the same ray. That single fact is the whole trick: it is what keeps a sunflower head, or this pattern, filling in without ever leaving a visible seam or a repeating spoke.

— Source: Vogel, H. (1979) "A better way to construct the sunflower head", Mathematical Biosciences 44(3-4)

Then each parameter is annotated, including which ones are mathematics and which are only rendering choices — a distinction the app is explicit about, because conflating them is how people come away thinking they understand a formula they don't.

3 · Code. The real generator module, loaded lazily from source, not a rewritten teaching version. That same phyllotaxis document above corresponds to this, in full:

const maxR = Math.min(size.w, size.h) * 0.47;
const scale = maxR / Math.pow(points - 1, exp);
for (let n = 0; n < points; n++) {
  const r = scale * Math.pow(n, exp);
  const a = n * angleRad;
  children.push(el('circle', {
    cx: cx + r * Math.cos(a),
    cy: cy + r * Math.sin(a),
    r: p['dotMin']! + n * p['dotGrow']!,
    fill: accent ? 'accent' : 'ink',
  }));
}

Forty lines, no framework, no hidden library doing the interesting part. That is the point: the gap between the equation and the picture should be short enough to read in one sitting.

Every formula, explanation and citation in the catalogue is collected in docs/patterns.md — generated from the live registry and the same content the app serves, so it cannot drift.

This is the beginning of the README. Read the rest at the original. Read the full README ↗