Generate a Hilbert Curve
Draw a Hilbert space-filling curve. Runs entirely in your browser, so your data never leaves your device.
Output
The result appears here as you type.
How to use Generate a Hilbert Curve
- 1. Choose the curve's order. Set Iterations to pick the grid size the curve visits. A 5th-order curve snakes through every cell of a 32x32 grid; higher orders visit finer, larger grids.
- 2. Size the canvas. Set Width (px) and Height (px) to fit the grid the curve traverses. A square canvas matches the curve's square grid structure best.
- 3. Pick colors and line width. Choose Line color, Background color and Line width depending on whether you want to trace the path visually or just show the overall filled pattern.
- 4. Review the rendered curve. The tool draws a single continuous line that visits every cell of the grid exactly once as an SVG. Save it once the order and styling look right.
When to use Generate a Hilbert Curve
Generate a Hilbert Curve draws the classic Hilbert space-filling curve, a single line that passes through every cell of a square grid while keeping nearby grid cells close together along the line. It is one of the most cited examples of a space-filling curve in computer science.
- Teaching space-filling curves and locality. Database and graphics courses use the Hilbert curve to explain locality-preserving indexing, since points close on the curve stay close in 2D space, unlike a simple row-major scan.
- Explaining Hilbert curve indexing schemes. Geospatial databases sometimes use Hilbert curve ordering to index 2D coordinates. A rendered example at a specific order helps explain the concept before diving into the indexing math.
- Illustrating recursive grid traversal. Computer science courses on recursion use the Hilbert curve's self-similar construction rule as a visual, memorable example that goes beyond simple factorial or Fibonacci recursion.
- Producing a space-filling curve figure for a paper. A paper on cache-oblivious algorithms or image compression references Hilbert curve ordering and needs a correctly rendered example at a specific order for a figure.
Examples
A 5th-order Hilbert curve
Output
An SVG drawing of a single line that snakes through every cell of a 32x32 grid.
About the Generate a Hilbert Curve tool
Generate a Hilbert Curve runs as plain JavaScript in your browser tab, with no server behind it. Draw a Hilbert space-filling curve. Whatever you put in stays on your device from start to finish.
The tool is part of EditSafely's Math Tools section, 234 single-purpose utilities built around the same idea: open the page, get the result, keep your data to yourself.
You can shape the output with 6 settings, including Iterations, Width (px), Height (px) and Line color, and the result refreshes the moment you change one. A worked example further down the page shows exactly what the tool produces for a real input.
That local-first design has practical benefits beyond privacy. The tool keeps working on a flaky connection once the page has loaded, results are instant because nothing round-trips to a server, and it is safe to use with confidential material.
Frequently asked questions
Is Generate a Hilbert Curve free to use?
Yes, it is completely free. All 2,658 tools on EditSafely work without an account, a subscription or usage limits.
Does the generator send anything to a server?
Everything happens locally. Your browser downloads the tool's code once, then does all the processing itself; nothing you enter is transmitted, stored or logged. You can even go offline after the page loads and it will still work.
How do I get a different result?
Run the generator again. Each run is computed fresh on your device, and any options you change are applied to the next result immediately.
Do I need to sign up or install anything?
No. The tool works in any modern browser on desktop, tablet or phone. There is no account to create, no extension to add and no software to install.
Can I save what the tool produces?
Yes. Use the download or copy controls in the output panel to keep the rendered result once it looks the way you want.