Space-Filling Curve Generator
A space-filling curve threads through every cell of a grid in a single unbroken line. The Hilbert curve is the famous one because of a property that sounds impossible: cells that are close together along the curve are always close together on the grid. That makes it genuinely useful for laying out data that will be read in ranges, and it is also simply nice to look at.
What this generator does
Computes the position of every point along the chosen curve and draws the path across the grid. It measures how many consecutive steps land on a touching cell and how far the longest jump reaches, which is exactly where the two curves differ.
How to use this tool
- Pick a curve and an order — order 3 is an 8 by 8 grid, order 5 is 32 by 32.
- Follow the line and see that it never crosses itself and never lifts.
- Switch to Z-order and look for the long diagonal jumps.
- Increase the order and watch the same shape repeat at a smaller scale.
Understanding the controls
- Curve
- Hilbert never jumps — every step moves to a touching cell. Z-order is far cheaper to compute but jumps across the grid, which costs it the locality Hilbert has.
- Order
- Between 1 and 5. Each order doubles the grid in both directions, so order 5 is a 32 by 32 grid of 1,024 cells.
Common use cases
- Understanding spatial indexing and why Hilbert order is preferred
- Generating curve paths for plotter art or embroidery
- Teaching recursion with a shape that visibly contains itself
- Comparing locality between two common orderings
- Producing a path to drive a drawing machine
How this generator works
A Hilbert position is found by walking down the orders, rotating and reflecting the quadrant at each level so the curve joins up continuously across the boundaries — that rotation is the whole trick, and leaving it out produces a curve that jumps. Z-order simply interleaves the bits of the two coordinates, which is why it is fast and why it jumps. Both are checked by counting distinct cells against the size of the grid.
Randomness and fairness
Nothing here is random. A curve is completely determined by its kind and its order, so the same settings always draw exactly the same path.
For how randomness is produced across the whole site, see how Generate Random works.
Limitations and good to know
- Square grids whose side is a power of two, which is what these curves are defined on.
- Order 5 is the ceiling, above which the drawing becomes an unreadable smudge at any sensible size.
- Two curves only; Peano, Moore and Gosper curves are not included.
- Two dimensions only, though both curves generalise to three.
Privacy and your data
The curve is computed and drawn entirely in your browser, and nothing about it is transmitted or stored.
Related generators
- Quadtree GeneratorA region subdivided around clustered points, with the cells confirmed to tile it exactly and hold every point once.
- Maze GeneratorPrint a maze with exactly one route from start to finish — three textures from long corridors to short dead ends, any size up to 40 by 40.
- Geometric Pattern GeneratorBuilds a tiled pattern under a symmetry rule and hands you the SVG — mirrored, half-turn or quarter-turn.
- Strip Packing GeneratorRectangles packed into a fixed-width strip with no overlaps, measured against the height no packing could beat.