Generate a Z-order Curve
Generate a Morton Z-order fractal 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 Z-order Curve
- 1. Set the curve's order. Choose Order to control how many grid points the curve connects. An order-4 curve connects 256 points arranged according to their Morton, or Z-order, code.
- 2. Size the canvas. Set Width (px) and Height (px) to fit the grid of points, keeping the canvas square so the underlying grid stays proportional at your chosen order.
- 3. Pick colors and line width. Choose Line color, Background color and Line width depending on whether you want to trace the zigzag connections between points or see the overall grid coverage.
- 4. Review the rendered curve. The tool connects grid points in Morton code order as an SVG line, showing the characteristic Z-shaped jumps that give the curve its name. Save it once the order looks right.
When to use Generate a Z-order Curve
Generate a Z-order Curve draws the Morton order curve, which connects grid points according to interleaved binary coordinates rather than a purely continuous space-filling rule like the Hilbert curve. It is widely used in databases and computer graphics for encoding 2D or 3D coordinates into a single sortable value.
- Teaching Morton code indexing for spatial databases. Geospatial and quadtree-based database indexes often use Z-order, or Morton code, to interleave coordinate bits. Rendering the curve helps connect the bit interleaving math to a visual traversal order.
- Comparing locality quality against the Hilbert curve. The Z-order curve has worse locality preservation than the Hilbert curve, meaning nearby points on the curve are not always nearby in space. Rendering both side by side shows this visually.
- Explaining quadtree and octree traversal order. Z-order curves match the natural traversal order of a quadtree, making this a useful supporting figure when teaching spatial indexing data structures in a computer science course.
- Producing a figure for a computer graphics or database paper. A paper discussing texture memory layout or spatial index performance can reference a correctly rendered Z-order curve at a specific order as a supporting figure.
Examples
An order-4 Z-order curve
Output
An SVG drawing connecting the 256 Morton-code grid points in order.
About the Generate a Z-order Curve tool
Generate a Z-order Curve is a free online tool that works entirely inside your web browser. Generate a Morton Z-order fractal curve. Because the processing happens on your own device, nothing you enter is uploaded, logged or stored anywhere.
This page is one of 234 Math utilities on EditSafely. Each one does a single job well, and all of them follow the same rule: your input stays on your machine.
You can shape the output with 6 settings, including Order, 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.
Because nothing leaves your device, the tool is suitable for sensitive content such as internal documents, credentials or customer data. It also responds instantly, since every keystroke is handled on your own machine rather than by a remote API.
Frequently asked questions
Does Generate a Z-order Curve cost anything?
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?
No data leaves your device. The whole tool is JavaScript that runs inside your browser tab, so there is no upload, no server-side processing and no log of what you did. If you disconnect from the internet after the page loads, it keeps working.
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?
Nothing to install and no account needed. Open the page in any up-to-date browser, including on a phone or tablet, and the tool is ready.
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.