--- layout: "article.njk" title: "The Doodle Architect: How Wrist Physics and SVG Shaders Solved the LLM Illustration Problem" description: "Why LLMs produce sterile vector slop when asked to sketch, the mathematical kinematics of hand-drawn lines, and the zero-JS evaluation stack we built for authentic sketchnotes." date: "2026-09-01" tags: ["AI", "LLMs", "SVG", "Architecture", "Design", "Graphics"] featured: true permalink: "/articles/doodle-svg-architect-hand-drawn-systems/" eleventyExcludeFromCollections: false published: true --- When you ask a frontier model to "draw a quick napkin diagram" or "sketch a whiteboard architecture," you almost always receive one of two catastrophic failure modes: 1. **Sterile Computer Geometry:** Perfectly flat `` and `` elements with razor-sharp corners and bucket fills that look like 1995 clip art. 2. **Bézier Spaghetti:** Erratic spline control points oscillating wildly with unnatural cusps and pinch points. Just as we discovered when building the [Illustrated Room](/articles/building-the-illustrated-room-spatial-reasoning-llms/), models fail not because they lack vector syntax knowledge, but because **autoregressive token prediction has no built-in kinematics of human motor control**. To solve this, we built **`doodle-svg-architect`**—an agent skill and dual-tier evaluation harness that enforces wrist-bowing physics, offset watercolor washes, and zero-JS GPU paper shaders. --- # 1. The Physics of Human Inking A human hand with a fountain pen does not emit Euclidean line segments. Authentic sketches exhibit four non-negotiable physical traits: ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ THE FOUR PHYSICAL LAWS │ │ │ │ 1. Endpoint Overshoot ──► Pen lands past the vertex (±2-3px) │ │ 2. Wrist Bowing ──► Biomechanics create chord-normal arc curvature │ │ 3. Dual-Pass Retracing ──► Instinctive second pass creates sketchy depth │ │ 4. Offset Marker Wash ──► Color wash bleeds and shifts outside contours │ └─────────────────────────────────────────────────────────────────────────────┘ ``` ### The Wood et al. Bowing Formulation Based on the empirical visualization research of Wood, Isenberg, et al. (2012), our skill models segment bowing using chord-normal displacement: For a line between $P_1(x_1, y_1)$ and $P_2(x_2, y_2)$ with length $L$: $$\mathbf{u} = \left(\frac{\Delta x}{L}, \frac{\Delta y}{L}\right), \quad \mathbf{n} = \left(-\mathbf{u}_y, \mathbf{u}_x\right)$$ The midpoint target displaces along the normal: $$d_{\text{bow}} = \text{bowing} \cdot \left(\frac{L}{200}\right) \cdot \mathcal{N}(0, 1)$$ Cubic Bézier control points at $1/3$ and $2/3$ intervals inherit this bowing with stochastic jitter: $$CP_1 = P_1' + \frac{1}{3}(P_2' - P_1') + d_{\text{bow}}\cdot\mathbf{n} + \mathbf{J}_1$$ $$CP_2 = P_1' + \frac{2}{3}(P_2' - P_1') + d_{\text{bow}}\cdot\mathbf{n} + \mathbf{J}_2$$ --- # 2. Zero-JS GPU Paper Shaders Rather than bundling heavy client-side JavaScript runtimes (like canvas libraries), the entire aesthetic is rendered natively by the browser's GPU using declarative SVG filter graphs: ```xml ``` --- # 3. The Dual-Tier Evaluation Loop No illustration is shipped without running `eval_doodle.py`: ```bash python3 scripts/eval_doodle.py .html --render ``` 1. **Tier 1 (Deterministic AST Linter):** - Strictly enforces the `` color contract (zero stray hex codes). - Verifies line weight hierarchy (at least 2 distinct stroke tiers: 3.5px bold contour, 1.5px fine detail). - Enforces DOM phase layering (semi-translucent washes MUST render in `` behind ink strokes). - Rejects unstyled raw geometric shapes. 2. **Tier 2 & 3 (Headless Pixel & LLM-as-Judge):** - Captures headless Chrome render at 2x resolution. - Evaluates 3-second cognitive clarity, hand-drawn vitality, and visual metaphor wit. --- # 4. Live Exemplar: Autonomous Agent Sketchnote Below is an authentic, pure SVG sketchnote generated via the `doodle-svg-architect` pipeline:

--- # What's Next The complete skill, reference library, and evaluation tool are packaged in `.agents/skills/doodle-svg-architect/`. Any agent operating in this codebase can now activate the skill to generate whiteboard diagrams, system explainers, and interactive doodle components with zero geometric slop.