anatomy
Build crafted, highly detailed, interactive isometric SVG figures that explain a technical idea as a real physical object (a test rig, a dial gauge, a cabinet of drawers, a plotter, a lock), with many small precise solid parts, four-tone shading, correct painter's order, a framed card with title, hint and live readout, and calm eased motion. Use this whenever someone wants an isometric illustration, an explanatory diagram or figure for docs, a blog post, a landing page or an article, a "Linear-style" or "premium" technical drawing, an interactive explainer, or an SVG that shows how a system, algorithm or component works, even if they never say "isometric". Works framework-free (TypeScript/JS that writes SVG and HTML) and in React/Next.js, and can add realistic WebGL shaders (fire, exhaust, water, caustics, lamp light) that live inside the drawing in the same isometric perspective. Also publishes a finished figure to the Anatomy community gallery when asked.
- 分类
- 通用
- 版本
- v1.0.0
- 作者
- 弈韬(@ra1nzzz)
- 下载
- 0
- 收藏
- 0
- 发布
- 2026-10-15
- 更新
- 2026-10-15
- TRACE 评分
- 0 / 5
内容概览
This skill makes figures like a small instrument on a bench: a heavy base on feet, rails with tick rulers, a carriage on bushings, knurled knobs, coil springs, a dial gauge whose needle moves, screws as tiny dots. The reader understands the idea because they recognise the machine. Every number the figure shows comes from the same model that moves its parts. Eight complete examples ship with the skill. Open the closest one before you start. Each framework-free example is built with node examples/<name /build.mjs, which writes a standalone HTML page next to the script; add --light for the light theme. - examples/dial-indicator/ is the smallest: a dial gauge on a stand, about 300 lines in all. - examples/desk-computer/ is framework-free SVG: a desk computer with a keyboard you can type on. The typed line appears on a CRT screen drawn in the plane of the case front, and the picture collapses…