The golden angle

Sunflowers place each new seed about 137.5° around from the last. That angle splits a full turn by the golden ratio, so no two seeds ever line up, and the head packs tight with no gaps. Nudge the angle a fraction of a degree either way and the seeds fall into spokes.

This page has no JavaScript. The seed head is 800 empty <i> elements with no classes and no inline styles. Each one works out its own place from sibling-index() andsibling-count(), which became Baseline in 2026:

i {
  --p: progress(sibling-index(), 1, sibling-count());
  transform:
    rotate(calc(sibling-index() * var(--turn) * 1deg))
    translateX(calc(sqrt(sibling-index() / sibling-count()) * var(--radius)));
}

--turn is a registered custom property, driven by a scroll-driven animation that spends most of its length near 137.508°. The number at the bottom is the same property, split into digits withround() and mod() and printed with CSS counters.

Tracing every 13th or 21st seed picks out one spiral arm at the golden angle, because 13 and 21 are Fibonacci numbers. Away from it, the same seeds line up in a straight spoke.