Field key

No. 41 · Early example

The lock: the key the stage keptShear line: compared hereDrawn this framefieldKey for a default pill in a 400 × 250 box, as a pin-tumbler lock cut open. The key is the one I build this frame: eight cuts, one for each part in the order they are joined with |, from width at the tip to power at the bow. The lock is pinned to the key the stage kept. When every cut matches, every pin meets the shear line and the plug turns: the pass returns and nothing is drawn. Hover a part to change it by one. Its pin stands proud, the lock jams, and the stage keeps the new key and draws all four shape targets again, 1 + 1 + 16 + 16 = 34 draws, counted off on the plate in front. One part is enough, and two cost no more.

A pin-tumbler lock cut open. The key has one cut per shape setting, and the cache only opens when every cut still matches the last frame’s.

Drawn while the skill was being made, for a long article on rendering frosted panes in WebGL.

Install

npm install anatomy-figures

In your code

page.tsx

import { FieldKey } from "anatomy-figures";

<FieldKey theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import FieldKey from "anatomy-figures/field-key";

Theme it

Early examples keep their own light and dark palettes: theme picks one, and --anatomy-card sets the ground.

page.tsx

<FieldKey
  theme="dark"
  tokens={{ "--anatomy-card": "#000000" }}
/>

Without React

It still draws with React inside, so install react and react-dom next to it.

index.html

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

define();

<anatomy-field-key theme="light"></anatomy-field-key>