SVG · WebGL · 3D
Explain an idea by building it as a real, working object.
Anatomy makes crafted, interactive isometric figures out of dozens of small, solid, shaded parts. Every number a figure shows comes from the same model that moves it.
Figures
Nine working examples. Each one runs live in the browser.
Fig 1Figure
Dial indicator
The smallest example: a dial gauge on a stand, about 300 lines in all.
SVG
Fig 2Figure
Push button
A push button in a loop with a 1.5 V cell and a bulb. Press it to close the circuit.
SVGPDF
Fig 3Figure
Test rig
A glass button on a spring carriage, a finger probe that presses and pulls, and a dial gauge reading the lean.
SVGReact
Fig 4Figure
Spot plate
Six pairs of glass drops on a spot plate; a pair closer than merge runs together into one piece of glass.
SVGReact
Fig 5Figure
Desk computer
A 1984-style desk computer whose keyboard you can type on; the line appears on the CRT.
SVG
Fig 6Hero
Arcade cabinet
An upright cabinet with its side panel off. A quarter rolls down the chute and wakes the machine.
SVGAuditPDF
Fig 7Hero
Raptor engine
A Raptor 2 engine in a test stand. It fires, and it comes apart into 11 assemblies.
SVGWebGLAuditPDF
Fig 8Hero
Ripple tank
A school ripple tank over a paper screen, seen from 44° up, with two WebGL layers.
SVGWebGL
Fig 9Hero
Turning dial
The optional 3D mode: a combination dial that turns in true 3D with a small robot hand on it.
3DWebGL
The object is the explanation
No boxes, arrows or labels. A recognisable machine whose working is the concept.
One shared GPU context serving many canvasesA gantry plotter: one print head visiting 16 wells
A cache key that skips work when nothing changedA pin-tumbler lock that only turns when every pin matches
Seven render targets with different bytes per texelA chest of seven drawers, each as deep as its bytes
A separable blur, 49 × 49 taps vs 49 + 49A bed-of-nails stamp beside two combs on rails