Draw Flowsnake Fractal

A space-filling curve discovered by mathematician Bill Gosper in 1973. It’s defined by an L-system over a hexagonal grid: starting from a single segment, each iteration replaces every segment with a 7-segment zig-zag pattern that turns in 60° increments. The infinite limit fills the “Gosper island” – a Koch-snowflake-like fractal-bounded region. The curve itself has Hausdorff dimension 2; the boundary of the Gosper island has dimension log(7)/log(3) ≈ 1.1292.

A portmanteau of “flow” (the smooth winding path) and “snake” (the serpentine zigzag look). The term appeared in Martin Gardner’s 1976 Scientific American column where he popularised Gosper’s discovery. Alternative names: “Gosper curve” (after the discoverer), “Peano-Gosper curve” (placing it in the lineage of Peano’s original 1890 space-filling curve), or just “hexagonal Gosper”.

Both are space-filling curves with dimension 2. Differences: Hilbert (1891) uses a square grid with 90° turns and fills a square. Gosper (1973) uses a hexagonal grid with 60° turns and fills the Gosper island. Hilbert visits a 2^n × 2^n grid of cells per iteration; Gosper visits 7^n cells. Hilbert is more useful for spatial indexing (preserves locality on a power-of-2 grid). Gosper is more visually pleasing – smoother curves due to 60° angles.

A → A-B--B+A++AA+B-. Read left to right: draw A (forward), turn right 60°, draw B (forward), turn right 120° (two minuses), draw B, turn left 60°, draw A, turn left 120°, draw A, draw A, turn left 60°, draw B, turn right 60°. So one A becomes a 7-segment zigzag containing 4 A’s and 3 B’s. Similarly for B. Total: every iter multiplies symbol count by 7.

Iter 6 produces 7^6 = 117,649 draw-forward segments – that’s the slow case (~3 s desktop, may be 5 s on phones). Iter 7 would be 7^7 = 823,543. Each segment is a separate Canvas lineTo call inside one beginPath…stroke batch. At ~1M lineTo calls, the path data alone takes tens of MB and rendering enters the “browser freezes” zone. Iter 6 is the comfortable ceiling.

Standard self-similarity formula: dim = log(N) / log(S) where N copies are placed at scale 1/S. Gosper: N = 7 copies of A or B per iteration, each at scale 1/√7 of the original size. So dim = log(7)/log(√7) = log(7) / ((1/2) log(7)) = 2. Dimension 2 confirms the space-filling property: in the infinite limit, the curve covers the Gosper island with positive area.

Calls ctx.fill() after building the path. Canvas interprets the path as a closed shape (auto-closing the last point to the first) and fills using the non-zero winding rule. For the Gosper curve at intermediate iterations, fill mode visualises the Gosper island – the hexagonally-bounded region the curve covers. At iter 5-6 with thin lines, fill mode + a darker line color produces a striking outline-on-fill effect.

Yes – 100% client-side. L-system expansion and Canvas drawing happen in your browser. No parameters or images leave your device. Verify in your browser’s Network tab.