Draw Hausdorff Fractal

David Hilbert’s 1891 construction. Take a unit square; subdivide into a 2×2 grid; draw a U-shaped path visiting all 4 sub-squares. To increase resolution: each sub-square gets its own U (with appropriate rotations/reflections), and you connect them at the right places. After N iterations, the curve visits a 2^N × 2^N grid – covering everything. In the infinite limit, the curve passes through every point in the square (space-filling). Practical uses: spatial database indexes (R-tree, Hilbert R-tree), image dithering, GPU memory layout.

Eliakim Hastings Moore’s 1900 variant of the Hilbert curve. Same fill, same dimension, but the curve forms a closed LOOP – the start and end points are adjacent rather than at far corners. Useful when you want a circular traversal (cyclic ordering of points). Implementation difference: Moore’s L-system axiom is AFA+F+AFA (a starter pattern, not just A), and its rules are A → -BF+AFA+FB-, B → +AF-BFB-FA+. Same 90° turn. Same dimension 2.0.

Both curves are TRULY space-filling: in the infinite-iteration limit, they pass arbitrarily close to every point in their 2D region. The Hausdorff dimension formula for self-similar sets: dim = log(N)/log(S) where N copies at scale 1/S. Hilbert: 4 copies at 1/2 scale → dim = log(4)/log(2) = 2. Moore: same. Dimension 2 confirms space-filling. The finite iterations you see have lower DRAWING dimension (a finite path), but they’re approximations of the limiting dim-2 set.

Both curves are CONTINUOUS – points close in the 1D parameter (curve position) map to points close in 2D (xy). Critically, the converse is APPROXIMATELY true too: 2D points that are close usually appear close in the 1D ordering. This is what makes Hilbert curves so useful for spatial indexing – convert 2D coordinates to 1D Hilbert index, sort by index, and you get good cache locality for range queries.

Hilbert at iter N has 4^N − 1 line segments (= 2^N × 2^N − 1 cells visited). Iter 7: 16,383 segments. Iter 8: 65,535. Iter 10: 1,048,575. Browser path rendering performance degrades past ~50k lineTo calls. Iter 7 stays under 500 ms desktop. Moore is similar density.

The traversal order. Continuous mode draws every segment in the primary color – you see the shape, not the path. Gradient mode lerps primary → secondary along the path’s index. So you can SEE which corner the curve started in, where it went, and where it ended. For Hilbert at iter 4: start in one corner, end in an adjacent corner. For Moore: start and end are adjacent (forming the closed loop visually).

Yes – 100% client-side. L-system expansion and Canvas drawing run in your browser. No parameters or images leave your device.