Drawing Hilbert curves with SVG

By DesertDawg

Hilbert curves are a type of space-filling curve that can be constructed with the SVG polyline element, using a basic design and then aggregating.

I started by polylining one basic design into four sections of a graph, making the necessary adjustments to connect them up. This then becomes my main building block.

View the main building block.

By taking the main building block and translating, rotating and scaling, the next-larger curve can be constructed. To flip a section, a negative scale value is used. The four sections are joined by three short line segments.

View the next-larger curve.

Then, do it again to make it bigger. If you connect the two ends at the bottom, you will have a closed curved which could be copied as an image and color filled.

View the next-larger curve.

Working with Paths

By changing the polyline to a SVG path element and connecting up the four lines, you can make a super path. Then add some SVG animated motion.

View the animated path.

Here is another example of an animated path where I am animating two circles (one twice as fast as the other), one png image and one text string which only makes one circuit and then freezes.

View the animated path.

Here is an example of an animated text path.

View the animated text path.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.