Draw Hausdorff Fractal
Draw the Hilbert curve or Moore curve (closed-loop variant) - true space-filling fractals (dim 2). Custom colors, gradient mode. Free, offline, client-side.
Naming disclosure: this tool was originally labeled "Hausdorff fractal" but the L-system rules A → +BF-AFA-FB+, B → -AF+BFB+FA- at 90° turns are exactly the standard Hilbert curve (David Hilbert, 1891). There's no canonical "Hausdorff fractal" - Felix Hausdorff is known for the Hausdorff DIMENSION metric, not a specific curve. To make this tool genuinely useful alongside the dedicated draw-hilbert-fractal sister tool, two patterns are included: the Hilbert curve AND the Moore curve, a closed-loop variant that begins and ends at adjacent points.
How to Use Draw Hausdorff Fractal
- Pick the pattern. Hilbert (1891) - the standard space-filling curve, opens at one corner. Moore - a variant by Eliakim Moore (1900) that closes into a loop (start and end points are adjacent), useful when you want the curve as a closed-loop traversal.
- Set iteration depth (1-7). Hilbert at iter N produces 4^N − 1 line segments. Iter 4 = 255 segments, iter 7 = 16,383. Moore is slightly denser due to its non-trivial axiom.
- Choose render mode: Continuous (single primary color stroke) or Gradient (RGB lerp from primary at start to secondary at end - visualises traversal order).
- Pick colors, canvas size, background, and line width. Low-contrast pairs trigger an info-toast warning.
- Press Ctrl+Enter or click Draw. Stats show pattern, segment count, dimension (always 2.0), path length in display pixels, render time.
- Watch the gradient: in Moore mode, the gradient ends right next to where it started - that's the loop-closure property. In Hilbert, the start and end can be in any two corners.
- Copy or Download. Copy via ClipboardItem PNG. Download as
hilbert-curve-iter-N.pngormoore-curve-iter-N.png.
Frequently Asked Questions
What’s the Hilbert curve?
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.
What’s the Moore curve?
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.
Why is the dimension always 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.
What’s the locality-preserving property?
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.
Why is iteration capped at 7?
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.
What does gradient mode reveal?
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).
Is my data secure?
Yes – 100% client-side. L-system expansion and Canvas drawing run in your browser. No parameters or images leave your device.