Hilbert Curve Generator
Generate and visualize space-filling Hilbert curves. Animate drawing and inspect 1D-to-2D coordinates.
Last updated: May 29, 2026
Hilbert Settings
Control order & grid coordinates
Styling Options
Line stroke & background settings
A Hilbert Curve is a space-filling fractal curve that maps a 1D line segments recursively into a 2D space. Points that are close in the 1D traversal mapping are close to each other in 2D space, preserving locality. This makes it highly useful in data compression, graphics engines, and database indexing strategies.
Hilbert Curve Generator — No Uploads Required
An interactive, educational Online Hilbert Curve Generator that visualizes space-filling curves first described by mathematician David Hilbert in 1891. Watch the curve traverse the 2D space recursively up to order 7. Zoom in to explore dense fractal patterns and hover over the canvas to see the exact 1D Hilbert index mapped to 2D grid coordinates. Choose between solid, linear gradient, and rainbow color styles, adjust line thickness, trace drawing speeds, and export high-resolution PNGs or clean vector SVGs. Processed locally in your browser for 100% security.
Why This Tool Exists
What makes this useful — and why I built it this way.
Visual Math: Understand space-filling geometry and locality-sensitive mapping visually.
E-commerce & Web Design: Create high-impact vector artwork and technical fractals.
Safe and Secure: Zero uploads. Runs entirely in your browser with complete confidentiality.
When You'd Use This
Real situations where this tool saves the day.
Data Science: Understand spatial indexing, database ordering, and dimensionality reduction.
Graphic Design: Generate mathematical prints, digital artwork, and futuristic textures.
Classroom Learning: Teach recursion, fractals, and 2D grid systems interactively.
Using Hilbert Curve Generator
It's straightforward — here's how it works.
Select a curve order using the recursion slider.
Adjust visual options like color mode (solid, gradient, or rainbow), line width, and backdrop.
Press the Play button to watch the trace animation, or adjust speed to render instantly.
Drag the mouse or trackpad to pan the canvas; scroll to zoom in on complex iterations.
Hover over the curve nodes to inspect 1D index mapping, and export the file as PNG or SVG.
Questions People Ask
Honest answers about how this works.
What even is a Hilbert Curve?
Great question. A Hilbert curve is a continuous space-filling curve that maps 1D space into 2D space. It is self-similar and preserves local distance relationships exceptionally well (points close in 1D index remain close in 2D space).
How is the 1D Hilbert index calculated?
Every point along the continuous curve is indexed sequentially. The generator maps these indexes back to 2D integer coordinates dynamically based on the grid orientation at each recursive step.
Why is the grid size limited to order 7?
An order 7 curve contains 2^14 = 16,384 points, which requires drawing thousands of segments. Higher orders like 8 (65,536 points) can bottleneck canvas rendering on lower-power devices, so order 7 is chosen as a safe limit.
Discover More Tools
Hand-picked utilities to speed up your workflow.