How the tone-net was built.

TONNETZ renders Euler's 1739 tone-lattice as a living SVG: pitch classes at the nodes, triads as the triangles, and a token that walks neo-Riemannian P/L/R edges with a soft three-voice triad waiting behind a single sound-on tap. One page, no images, no build step.

01Concept

The fiction: a listening-room installation that lets you see harmonic distance. The audience is anyone who has felt a chord change land without knowing why. The page has one job — show that chords are neighbours on a lattice, then let you hear the geometry: two tones held, one tone stepping, every 2.6 seconds.

02Palette

A recital hall after the house lights drop. The violet is the net — string, not voice. Gold is reserved for major and for the token; the minor tint is the same violet family cooled toward blue, so up-triangles and down-triangles read warm/cool at a glance. Body text got its own light ink because the spec's violet is a line token, not a text token.

#1C1820hall-dusk — the ground

#8A7FB8lattice violet — lines & marks only

#E0B054major-warm — ▲ triads, token, accents

#7E90D0minor tint — ▽ triads, derived from the violet

#E6E0F0ink — body copy, ~13:1 on dusk

#978CADmute ink — small labels, ~5:1

03Type

Bodoni Moda carries the display voice — a high-contrast Didone with the engraved, concert-programme air the subject deserves; the italic gold “a shape.” in the hero is the page's one typographic flourish. PT Mono does everything else: lattice labels, HUD readout, body copy. A mono face makes the pitch names sit like data on the net, and its even rhythm keeps the theory copy calm next to the animation.

04Techniques

SVG Tonnetz lattice — ~300 nodes generated from axial coordinates; pitch class is (7u + 4v) mod 12, so fifths run along one axis and major thirds along the other. Up-triangles are major triads, down-triangles minor, both drawn as faint quality-tinted fills.
Neo-Riemannian walk — the token's moves are pure lattice reflections: P flips across the root–fifth edge, L across the third–fifth, R across the root–third. Each step is chosen randomly (never undoing the previous move, P/L/R being involutions), the shared edge lights up mid-glide, and the HUD names the move with the actual held and moving tones.
WebAudio triads — created only on the sound-on tap (autoplay law), suspended again on toggle-off or tab-hide. Three persistent voices (paired sines detuned ±4 cents) glide through a low-pass at 1.9 kHz; on each landing only the moving voice retunes — nearest octave, one or two semitones — with a linear-attack / exponential-tail envelope so there is never a click.
Hexatonic cycle — every ~18 steps, if the geometry allows, the walk alternates P and L six times and returns home through three keys a major third apart. The HUD flags it.
Hardening — aspect-fit viewBox recomputed on resize, rAF cancelled and audio suspended on document.hidden, reduced-motion gets a settled lit-triad frame via both the CSS media query and a matchMedia gate, and a clamped delta accumulator keeps the walk honest across tab switches.

05Iteration log

Pass 1 — Craft

Rendered at 1440 and 375 and read every region. Found the HUD readout clipping below the fold at 900px height — tightened the hero's vertical rhythm (96/84 padding, 30px stacks). Found a phantom flex gap from the hidden voices row — switched it to a real hidden attribute. Verified the gold and violet inks against hall-dusk (7.8:1 and 5:1) and confirmed every P/L/R in the debug history obeyed the transform tables.

Pass 2 — Depth

Made the voice-leading visible on the net itself: on every landing the newly-arrived tone's node now flares — a ring that blooms and fades in 900ms — so “one voice moved” is legible without sound. Enriched the HUD move line to name the two held tones and the moving tone dynamically, and added the hexatonic P–L indulgence with its own HUD tag. Accented the moving voice slightly louder (0.30 vs 0.22) so the stepping line sings out of the triad.

Pass 3 — Hardening

Drove the whole thing headlessly: clicked the sound toggle and asserted the AudioContext ran, toggled off and asserted it suspended, verified voice pitch-classes matched the lit triad, and hash-compared frames 1.3s apart with sound off to prove the visual walk lives alone. Replaced the crop-prone slice viewBox with an exact aspect-fit recomputed on resize so the token can't wander off a phone screen. Chanel rule: deleted the token's redundant static halo ring — the pulse and the core were already enough.