Draw Morton Fractal
Draw the Morton (Z-order) curve - recursive bit-interleave space-filling pattern. Iterations 1-9, grid overlay. Free, offline, client-side, instant, secure.
Renders the Morton curve (Z-order curve, G.M. Morton 1966) - a space-filling
curve built by interleaving the bits of x and y. Unlike Hilbert,
Morton order has diagonal jumps at quadrant boundaries - the tradeoff that
makes its index cheap to compute.
How to Use Draw Morton Fractal
- Pick iterations (1-9). Each level n produces a
2ⁿ × 2ⁿgrid with4ⁿpoints. Iter 5 = 32×32 = 1,024 points; iter 9 = 512×512 = 262,144 points. - Set canvas size (300-1200 px). Larger helps at iter 7+ where individual cells get tiny.
- Choose line and background colors. Slate indigo on white is the default; the tool warns via toast if the contrast is too low to see.
- Adjust line width (1-10 px). Use 1 px at iter 7+ to keep the diagonal jumps readable instead of merged.
- Optionally enable the grid overlay to see how 2D space subdivides into
2ⁿ × 2ⁿcells. The grid is drawn before the curve so the line stays on top. - Click Draw Fractal (or press Ctrl/Cmd + Enter). At iter ≥ 7 a non-blocking toast estimates the render time - no modal dialog interrupts your work.
- Read the stats line. Watch the long-jump count - those are the diagonal discontinuities that distinguish Morton order from Hilbert order.
- Copy or download the PNG. Copy uses the browser's clipboard API (Chrome/Edge/Safari); a textarea fallback handles older browsers. Download saves
morton-fractal-iter-N.png.
Frequently Asked Questions
What is the Morton curve?
The Morton curve (also called the Z-order curve) is a space-filling curve that maps a 1D index to 2D coordinates by interleaving the bits of x and y. It was introduced by Guy Macdonald Morton at IBM in a 1966 technical report on file sequencing for geodetic databases – it predates the published quadtree paper and is one of the earliest spatial indexing schemes on record.
How does the bit-interleave work?
If x = 101 in binary and y = 110 in binary, the Morton code is built by interleaving: y2-x2-y1-x1-y0-x0 = 111001 in binary = 57 in decimal. Incrementing the Morton code visits cells in the canonical NW, NE, SW, SE order recursively – that is the “Z” shape this curve is named for.
Why are there long diagonal lines in the rendering?
These are the well-known Morton discontinuities. When the curve finishes one 2×2 block and starts the next, consecutive Morton indices can correspond to cells that are far apart in 2D – for example, index 3 sits at (1,1) and index 4 sits at (2,0). The tool counts these as “long jumps” in the stats. It is a genuine property of the curve, not a render bug. The Hilbert curve avoids these jumps at the cost of more complex computation.
What is the fractal dimension?
The Morton curve is a true space-filling curve, so its fractal (Hausdorff) dimension is exactly 2.0 in the limit as iterations approach infinity. At any finite iteration the rendered figure is still 1-dimensional in the strict sense – the displayed value reflects the theoretical limit, not the finite drawing.
Why does iteration n have 4 to the n points?
Each iteration subdivides every cell into 4 sub-cells (NW/NE/SW/SE), so the grid grows to 2 to the n by 2 to the n cells. That gives 4 to the n points total: iter 5 = 1,024; iter 7 = 16,384; iter 9 = 262,144. (Note: an earlier version of this FAQ incorrectly stated iter 9 was 16,777,216 – that figure is actually 4 to the 12. This has been corrected.)
Why is Morton order used in real systems?
The bit-interleave encoding is O(1) per coordinate with simple bitwise ops, making Morton order ideal for: database B-tree indexing on 2D spatial data, GPU texture swizzling (better than row-major for 2D locality), octree and quadtree linearization, and cache-friendlier matrix layouts. The tradeoff: it preserves some locality on average but breaks badly at quadrant boundaries.
What does the grid overlay show?
It draws the 2 to the n by 2 to the n cell boundaries at the current iteration. At iter 3 you see an 8×8 grid; at iter 7 you see a 128×128 grid. The grid is most useful at iter 1 through 5 where you can still see individual cells; at iter 7 and above it becomes a solid mesh.
Is anything sent to a server?
No. The page loads three static files (HTML, CSS, JS), then everything – Morton encoding, drawing, PNG export, clipboard copy – runs in your browser. You can disconnect from the internet after the page loads and the tool keeps working. No analytics, no telemetry, no cookies.
Is this tool free?
Yes – free, unlimited, no signup, no watermark, no usage cap. Use the PNGs in lectures, papers, blog posts, or art freely. Attribution to is appreciated but not required.