SVG block demo — part two

A follow-up to demo/svg-showcase. Two of these panels pull real data live from the location database via pg_query — the rest are just for fun.

Where the day goes: fixes by hour, last 30 days

Live query against locations, grouped by hour of day over the last 30 days. Amber spokes mark the two clear commute peaks — morning around 07:00–08:00, evening around 18:00–20:00.

Radial 24-hour clock chart, spokes showing count of GPS fixes per hour over the last 30 days, with amber spokes at 07:00, 08:00, 16:00, 18:00, 19:00 and 20:00 markedly longer than the rest — Fig. 1 — live pg_query, grouped by hour, last 30 days

Daily distance travelled — last 14 days

Same database, a different question: metres between consecutive fixes, summed per day. The two red bars aren't a charting glitch — they're a couple of long days that sit well above the usual local wandering.

Bar chart of distance travelled per day for 5-18 September, mostly under 30km except 9 and 10 September at roughly 207 and 205 km, highlighted in red — Fig. 2 — live pg_query, consecutive-fix distances summed per day

A ringworld, with no data behind it at all

A ringworld, because sci-fi deserves a turn too.

A stylised ringworld: a thin teal ring seen at an oblique angle encircling a small yellow sun, with a rust-coloured moon and a smaller blue planet nearby, on a star field — Fig. 3 — no query behind this one either

A few purely artistic pieces

No data, no purpose beyond looking nice — same rule as before: hand-written SVG, no screenshots.

Bioluminescent jellyfish

A translucent pale blue jellyfish with glowing cyan spots trailing wavy tentacles, drifting in dark deep-sea water with light rays, bubbles and a dimmer jellyfish in the background — Fig. 4 — no query, just a jellyfish

Circuit-board tree

A stylised tree on a dark PCB-green background, its trunk and branches drawn as right-angled circuit traces with small pad-like leaves at the tips — Fig. 5 — a tree that's secretly a PCB

Aurora over a mountain ridge

Green, purple and teal aurora bands rippling across a starry night sky above a jagged dark mountain silhouette — Fig. 6 — also no query behind this one

The Takagi function (blancmange curve)

A mathematical zig-zag with the property John asked about: it's built by stacking a triangle wave on top of a half-scale copy of itself, on top of a quarter-scale copy, and so on. The curve below overlays four stages of that construction — grey (1 term), blue (2), teal (3), and the bold amber curve (8 terms, close to the true limit). Every extra term folds a smaller zig-zag into the last one, and the result is continuous everywhere but has no tangent line anywhere — self-similar without being a fractal in the usual whole-shape-copied-into-itself sense. Values were computed directly (not estimated) and plotted as polylines.

Four overlaid zig-zag curves of increasing refinement (1, 2, 3 and 8 terms) showing the Takagi blancmange function, each stage nesting a smaller zig-zag inside the last, with the 8-term curve bold and amber, title caption below the plot — Fig. 7 — same zig-zag, folded into itself four times over

The Hilbert curve

The pattern John was thinking of: right-angle elbow tiles where the small scale reproduces exactly at the large scale, rather than just repeating periodically. The order-1 curve (grey, below) is one elbow-shaped loop through all four quadrants. Four rotated/reflected copies of it, joined up, give the order-2 curve (blue) — which is itself shaped like the same elbow, just more detailed. Repeat and you get order 3 (teal), then order 5 (bold amber): zoom into any quadrant of a higher-order curve and it's an exact copy of the whole thing, one order down. It's also a genuine space-filling curve — as the order goes to infinity it passes arbitrarily close to every point in the square, which is what makes it useful well beyond being a nice pattern (locality-preserving indexing, image dithering).

Four overlaid Hilbert curves of increasing order (1, 2, 3 and 5) showing the same right-angle elbow shape recurring at every scale: the grey order-1 loop is reproduced, rotated and reflected, as each quadrant of the blue order-2 curve, which is itself reproduced inside each quadrant of the teal order-3 curve, and so on up to the bold amber order-5 curve — Fig. 8 — Hilbert curve: the small-scale elbow motif is exactly reproduced, scaled, at every larger order