What is a Z-order curve?

It's a well-documented space-filling curve, also known as Morton order, that maps every cell of a 2D grid to a single number by interleaving the binary digits of the cell's x and y coordinates (alternating bits from each), then visiting cells in the order of that resulting number. Plotted out, the visiting order traces a recognizable, recursive Z-shaped zigzag across the grid.

How exactly are the bits interleaved?

For each cell's (x, y) coordinate, every bit of x is placed at an even bit position and every bit of y is placed at the next odd bit position in a combined binary number, called the Morton code or z-value. Sorting all grid cells by their z-value produces the traversal order shown in this tool.

What is this curve actually used for?

Z-order curves are widely used in real computing systems, most notably as a way to map 2D (or higher-dimensional) spatial data into a 1D array or database index while keeping points that are close together in space usually close together in the resulting order, which is valuable for spatial indexing, quadtrees, and texture memory layout.

What does the Order setting control?

Order (1 to 6) sets the grid size as 2^order x 2^order cells, so order 4 produces a 16x16 grid of 256 cells. The curve connects the center of every cell to the next in Morton order, drawn as one continuous path of line segments.

Z-order Curve Generator - Morton Order Space-Filling SVG

Overview

Introduction

The Z-order curve, also called Morton order, answers a practical question with an elegant trick: how do you turn a 2D grid of points into a single 1D ordering that still keeps nearby points roughly nearby? The answer is to interleave the bits of each point's coordinates.

This tool builds that ordering directly for a chosen grid size and draws it as a connected path, letting you see the recursive Z-shaped zigzag pattern that bit-interleaving produces.

What Is Generate a Z-order Curve?

A generator for the Z-order curve (Morton order), a documented space-filling curve that assigns every cell in a 2^n x 2^n grid a single ordering number by interleaving the binary digits of its x and y coordinates.

There is no text input or output, just a single numeric Order control; the tool computes every cell's Morton code internally, sorts by it, and renders the resulting visiting order as a connected SVG path.

How Generate a Z-order Curve Works

For a chosen order n, the grid has 2^n cells along each axis. Every cell's x and y coordinates are converted to binary, and their bits are interleaved, alternating an x bit and a y bit, into a single combined number called the Morton code or z-value.

Every cell in the grid is then sorted by its z-value, and that sorted order is the curve's visiting sequence, cell number 0 in the sort is visited first, cell number 1 next, and so on through every cell in the grid.

The tool draws a straight line segment connecting the center of each cell to the center of the next cell in that sorted order, tracing out the full path from the grid's first Morton-ordered cell to its last.

When To Use Generate a Z-order Curve

Use it to visualize how bit-interleaving turns a 2D grid into a 1D ordering, directly relevant to understanding spatial indexing structures like quadtrees, R-trees, or Morton-coded database indexes.

It's also a clean illustration of a genuine space-filling curve for a course or article covering fractals, spatial data structures, or computer graphics texture layout.

Often used alongside Generate a Cantor Dust Fractal and Generate a Fibonacci Word Fractal.

Features

Advantages

Directly implements the real Morton-order bit-interleaving rule used in production spatial indexing systems, not just a visual approximation.
Makes the curve's recursive, self-similar Z-shaped structure immediately visible by connecting every grid cell in its actual traversal order.
Exports as clean vector SVG or a flattened PNG for use in illustrations or teaching material.

Limitations

Order is capped at 6 (a 64x64 grid of 4,096 cells) for renderability, since the number of connecting segments grows as 4^order.
The tool always visits and connects every cell of a full square grid, it doesn't support a partial region or a non-power-of-two grid size.

Examples

Order 1

Input

Order = 1

Output

A simple 3-segment zigzag connecting the 4 cells of a 2x2 grid in Z order.

At order 1, the grid is just 2x2 (2^1 x 2^1), the smallest non-trivial case, tracing the basic Z shape the curve is named for.

Order 4

Input

Order = 4

Output

A dense, recursively Z-shaped path visiting all 256 cells of a 16x16 grid, with smaller Z patterns nested inside larger ones.

At order 4 the grid has 2^4 x 2^4 = 256 cells, and the Morton-order traversal visibly nests smaller Z patterns inside each quadrant of larger ones.

Best Practices & Notes

Best Practices

Start at order 3 or 4 to see the nested, self-similar Z pattern clearly before pushing toward the order-6 maximum, where the path becomes very dense.
Compare it against a simple row-by-row (boustrophedon) traversal mentally, the Z-order curve keeps spatially nearby cells much closer together in visiting order than a plain row scan does.

Developer Notes

Implemented via `interleaveBits`, which builds each cell's Morton code bit by bit (`z |= ((x >> i) & 1) << (2*i)` for x bits, `z |= ((y >> i) & 1) << (2*i + 1)` for y bits, across 16 bit positions), then all grid cells are sorted by that code and connected in order with straight line segments. Geometry is normalized into the shared 1000x1000 SVG viewBox afterward.

Generate a Z-order Curve Use Cases

Visualizing how Morton-order bit interleaving maps a 2D grid to a 1D traversal order
Teaching the spatial-locality intuition behind quadtrees, R-trees, and Morton-coded database indexes
Generating a recognizable space-filling curve illustration for a computer graphics or data structures course

Common Mistakes

Confusing Z-order with the Hilbert curve, both are space-filling curves used for spatial indexing, but the Hilbert curve preserves locality even better and uses a rotation-based rule rather than direct bit interleaving; this tool implements Z-order specifically.
Expecting the path to look like a smooth continuous sweep, Z-order jumps noticeably between some adjacent cells (it doesn't guarantee every step is to a directly neighboring cell), which is a known tradeoff versus curves like Hilbert's.

Tips

Try the Cantor Dust Fractal Generator next to compare a different way of organizing a grid, recursively excluding cells rather than ordering all of them into a single path.
Look at how each larger Z shape in the curve is built from four smaller Z shapes, one per quadrant, the same self-similar pattern repeating at every scale.

Generate a Z-order Curve