design-infraReport a problem or share feedback← Catalog
Two-key box · Anatomy
freeanatomy/public-key
Interactive isometric SVG explainer for two-key box. Reuse the PublicKey component from anatomy-figures/public-key in docs, articles and technical feature sections.
$
pnpm add anatomy-figuresnpm deps: react, react-dom
Our notes
Import PublicKey from "anatomy-figures/public-key" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.- Source
- Anatomy
- Kind
- component
- Categories
- illustration, 3d
- Use as
- drop-in — replaces your component
- Applies to
- illustration3d
- Motion
- on loop, state · medium · svg + js · medium cost
- Tags
- isometric, interactive, explainer, diagram, svg, docs, education, anatomy-figures, PublicKey, svg
- Licence
- MIT — Copyright (c) 2026 Ryan; skill and anatomy-figures have separate MIT repositories.
- Live demo
- skills.wheresryan.sh
- Docs
- skills.wheresryan.sh
Similar
Compare all 4 →- B-tree index · Anatomyanatomy/b-treeImport BTree from "anatomy-figures/b-tree" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.
- Binary search · Anatomyanatomy/binary-searchImport BinarySearch from "anatomy-figures/binary-search" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.
- Bloom filter · Anatomyanatomy/bloom-filterImport BloomFilter from "anatomy-figures/bloom-filter" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.