Subdivision
A rectangle, divided. Click any cell to split it along its longer edge — a composition assembling itself one decision at a time.
Focus
Structure as a sequence of small, defensible cuts.
Medium
SVG
Duration
Ongoing
Last updated
June 2026
Click any cell above and it splits along its longer edge, at an off-centre ratio. The new pair fades in with a brief accent edge, then cools to a hairline. Keep going and a composition builds itself.
Why this
one.
Layout is not a single grand gesture — it is a sequence of small cuts, each of which you should be able to defend in a sentence. "This splits here because…" The interesting constraint is knowing when to stop: every cut buys clarity until, at some point, the next one only buys clutter.
How it
works.
Plain SVG rectangles driven by a little React state — no canvas, no animation library. Each split picks the longer axis and an off-centre ratio derived deterministically from the cell's position, so the result feels composed rather than random; a CSS transition fades new cells in and cools their accent edge. Cells stop being splittable once they'd fall below a minimum size.