Draw Hilbert Fractal
Draw the Hilbert space-filling curve in your browser. 9 iterations, rotation, gradient, endpoints. Free, offline, client-side, instant, secure.
David Hilbert's 1891 space-filling curve via L-system (axiom L, rules L → +RF-LFL-FR+, R → -LF+RFR+FL-, 90° turns). Sister tool: draw-hausdorff-fractal (Hilbert + Moore curves explorer).
Iter N = 4^N − 1 F-segments visiting a 2^N × 2^N grid. Iter ≥ 8 takes 1-3 s.
How to Use Draw Hilbert Fractal
- Pick iterations (1-9). Iter 1 = 3 F-segments (the basic U-shape). Iter N = 4^N − 1 segments visiting a 2^N × 2^N grid. Iter 9 = 262,143 segments. Iter ≥ 8 triggers the loading state.
- Set canvas size (300-1200 px). The curve is auto-scaled to fit with 40 px padding regardless. HiDPI/Retina-aware (backing store × DPR for crisp rendering).
- Choose start rotation (0°/90°/180°/270°). Same curve, four orientations - useful when fitting the result into a layout.
- Pick colors and line width. Low-contrast color pairings trigger an info-toast warning.
- Optional: enable "Show endpoints" to mark the start (green dot) and end (red dot). Enable "Color gradient" to lerp from your line color to orange along the traversal - visualises which corner the curve started from.
- Press Ctrl+Enter or click Draw. Stats show: segments, grid resolution, total path length, L-system char count, fractal dimension (2.0), render time.
- Copy or Download. Copy puts PNG bytes on clipboard via ClipboardItem (paste straight into image editors). Download saves
hilbert-curve-iter-N.png.
Frequently Asked Questions
How is this different from the draw-hausdorff-fractal tool?
This tool is a focused Hilbert-curve viewer with 4 starting orientations. The sister draw-hausdorff-fractal tool (originally misnamed as “Hausdorff” – see its own FAQ) is a Hilbert + Moore (closed-loop variant) multi-pattern explorer. Pick this tool if you want the canonical Hilbert curve with rotation variants. Pick that one if you want to compare Hilbert vs Moore curves side-by-side.
Who was David Hilbert?
One of the most influential mathematicians of the late 19th and early 20th centuries (1862-1943). Founded modern functional analysis, formalised geometry (Hilbert’s axioms), proposed the 23 “Hilbert problems” (1900) that shaped 20th-century math. The Hilbert space-filling curve was a short note (1891) demonstrating that Peano’s earlier space-filling curve wasn’t unique. Less philosophical, more constructive: just here’s another one. Today the curve is named after him because his construction is cleaner – uses a simple 2×2 subdivision instead of Peano’s 3×3.
Why does the curve “fill” space?
At iteration N, the curve visits each cell of a 2^N × 2^N grid exactly once. As N → ∞, the grid resolution becomes arbitrarily fine, so the curve passes arbitrarily close to every point in the unit square. The Hausdorff dimension of the LIMIT set is 2 – confirming it covers the square with positive area. This violates the early-1800s intuition that a 1D curve can only have 1D “extent” – Cantor (1877) and Peano (1890) shocked the math world by proving otherwise.
What’s the locality-preserving property?
If two 2D points are NEARBY, then their 1D Hilbert-curve indices (positions along the curve) tend to be nearby too. The converse isn’t quite true (some 1D-close points are 2D-far apart due to curve boundaries between sub-blocks), but locality-preservation is good ENOUGH to be useful. This is why Hilbert curves are used for spatial database indexes (R-tree, Hilbert R-tree), GPU memory access patterns, and image-dithering orders.
What’s a Hilbert R-tree?
A spatial index for 2D rectangles. Compute the Hilbert index of each rectangle’s centre point, then insert into an R-tree sorted by Hilbert index. Result: rectangles that are CLOSE in 2D end up in the same B-tree node, giving fast range queries. Used in PostGIS, Oracle Spatial, SQL Server, MongoDB GeoJSON indexes. Original paper: Kamel & Faloutsos 1994. Alternative: Z-curve (Morton order) – simpler but worse locality.
Why are iterations capped at 9?
Iter N has 4^N − 1 segments. Iter 9 = 262,143. Iter 10 = 1,048,575. Each segment is one lineTo Canvas call in a single beginPath…stroke batch. At ~1M lineTo calls, path data is tens of MB and stroke takes seconds. Iter 9 stays under 3 s on desktop. The L-system string at iter 9 is ~3 MB of characters – generating IT alone takes a few hundred ms.
What does the gradient mode reveal?
Color lerps from your chosen line color (start) to orange (#f97316) at the end. Shows the TRAVERSAL ORDER. You’ll see the curve start in one corner, work through one quadrant, jump to the next quadrant, etc. The locality-preserving property is visually obvious: spatially-close segments tend to be similar colors (close in the lerp). Adjacent quadrant boundaries show as sharp color jumps where the curve teleports across the figure.
Why offer 4 starting rotations?
The canonical Hilbert curve starts at one corner and ends at an adjacent corner. Rotation 0° puts the start at one corner; 90°/180°/270° put it at others. Useful when fitting the result into a specific page layout, or when you want to visualise the curve from a specific viewpoint. Doesn’t change the fractal mathematically – just rotates the rendered image.
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. Verify via your browser’s Network tab.