Subdivision
Structure as a sequence of small, defensible cuts.
- Status
- Live
- Medium
- SVG
- 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.
01 · Notes
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.
02 · Notes
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.
If something feels off, start there.
Tell me what's going on and what a good outcome would look like. A short email is enough — I read every one and reply within two working days.