Anatomy · Collection

Pick one below to play with it here, or open it on its own page with the prompt that made it and the line that puts it in your code.

Drag crown ↑ to windSslowEapart

A Swiss automatic movement, 25.6 mm across, in a holder on a bench mat. The balance swings at 4 Hz and the pallet fork lets the escape wheel through half a tooth eight times a second, so the seconds step in eighths.

Open

Install and theme

Every figure here, early examples included, is a live React component in one package:

npm install anatomy-figures

Import one by name, or import it on its own so the others never load:

page.tsx

import { Watch } from "anatomy-figures";
import Turbofan from "anatomy-figures/turbofan";

<Watch theme="light" />
<Turbofan theme="dark" />

Pick one of five themes, set one for a whole tree, and override any colour with tokens. Tokens are set on the figure itself, so they win over CSS from outside.

page.tsx

import { AnatomyTheme, Turbofan, Watch } from "anatomy-figures";

<AnatomyTheme theme="paper" tokens={{ "--anatomy-lit": "#e5484d" }}>
  <Watch />
  <Turbofan />
</AnatomyTheme>

<Watch theme={{ base: "light", "--anatomy-card": "#ffffff" }} />

Without React, every figure is also a custom element:

index.html

import { define } from "anatomy-figures/element/watch";

define();

<anatomy-watch theme="light"></anatomy-watch>

All 26 tokens, with what each one paints and its light and dark defaults, are listed under Every token.

WebGL

Fire, water, plasma and light, drawn by shaders in the same isometric camera.

16AfterburnerThrust stand

17Glory holeDrum furnace

18Tokamak shotTokamak

19Plasma cutterCNC gantry

20Forge and hammerCoal forge

21Turbofan ground runTrent 970

22Power stationGenerating unit

23Process pumpRefinery pump

30Pouring steelLadle and mould

33Pool reactorTRIGA reactor

3D

Parts that really turn, not only look isometric. Slow to make: hours, not minutes.

25SeasonsTellurion

Early examples

Drawn while the skill was being made, for a long article on rendering frosted panes in WebGL. They taught the skill most of its rules, and they ship in the package too, in their own light and dark palettes.