04 / SVG / 2026-04-19
Concept Illustrations
Eight takes on inline-illustration vocabulary.
How it works
// 01 DPI and pixel density
Each illustration starts with a `requestAnimationFrame` loop gated by an `IntersectionObserver`, so the canvas only ticks while it is on screen. That keeps a page with eight illustrations from lighting the CPU on fire. Device pixel ratio is read once per resize and baked into the canvas size so retina displays draw crisp strokes without re-rendering blurred pixels.
// 02 Bleed and cut tolerance
Geometry is defined as an array of points in a normalized 0 to 1 coordinate space, then mapped to the actual canvas width on draw. That way the same illustration adapts to any container width without the control points drifting. Stroke width, dash patterns, and easing curves are pulled from a shared vocabulary module so the four illustrations feel like they came from the same hand. Motion is driven by a single time value that advances per frame, which each illustration samples through its own easing function.
// 03 Safe zone and trim accuracy
The palette is a subset of the site's brand tokens, resolved at draw time via `getComputedStyle`. If the token changes, the illustration changes with it. Labels and small diagrammatic type use the same monospace font that shows up in the terminal chrome elsewhere on the site. Text is drawn as canvas text, not rasterized, so a screenshot at 3x still holds up.
// why this exists
illustration system range
Most marketing sites reach for stock illustration the moment they need to show a concept. The result is a library of teal humanoids pointing at laptops that every competitor already uses. This widget is a working argument against that habit. Four canvas2D illustrations, drawn in code, each one built to explain a specific idea the rest of the site keeps referencing: a converging operator, a tracking leak, an agent council, and a compound curve.
Every illustration renders to a 2D context with plain JavaScript and no external graphics library. The vocabulary is deliberately narrow. Thin strokes, flat geometry, motion that earns its frame, a palette that stays inside the brand system. The point is not to decorate. The point is to show the same operator aesthetic at work in the illustration layer that shows up in the type, the code, and the infrastructure diagrams elsewhere on the site. When an idea is worth explaining, it gets drawn on purpose.
The four concepts map directly to the positioning work. Converging operator is the claim that one person can hold creative, code, and ops without the usual handoffs breaking quality. Tracking leak is the CAPI Leak Report, visualized as pixel events falling through a broken pipe on their way to Meta. Agent council is the Berserk Stack thesis, showing named agents passing work sideways instead of vertically through a manager. Compound curve is the argument that small weekly ships stack into something that looks like overnight velocity six months later.
Each illustration is reusable on its own route, embeddable inside an MDX post, and cheap to animate because the draw loop only ticks when the viewport is visible. Treat the gallery as a pattern library rather than a finished piece. If you need an illustration for your own build log, steal the structure, swap the metaphor, keep the palette.
Frequently asked questions
Why draw in canvas instead of SVG for these?
Canvas lets me sample time and mutate state per frame cheaply, which matters for the animated variants. For the static ones, SVG would be equivalent. The decision is per-illustration, not dogmatic.
Can I use these illustrations on my own site?
The visual style is Michael's brand. The technique is free to copy. Grab the structure, swap the metaphor, change the palette, and build your own vocabulary.
How do you keep four illustrations feeling like one family?
Shared stroke width, shared dash vocabulary, shared easing curves, a palette pulled from the same token file. Four drawings from the same hand rather than four drawings tied together after the fact.
What does 'converging operator' mean?
The claim that a single person can hold creative direction, full-stack code, and cloud ops without quality breaking at the handoff. The illustration shows three lanes braiding into one output.
What does the tracking leak illustration show?
Pixel events falling out of a broken pipe on their way from browser to Meta. It is a visual for the CAPI Leak Report, which diagnoses the same problem on live Shopify stores.
Are these accessible?
Each canvas has an aria-label describing the concept and a text caption directly below. The motion respects prefers-reduced-motion by freezing at a representative frame.
How long did this take to build?
About five hours total across the four illustrations. Most of the time was spent pulling the vocabulary together, not drawing the shapes.
Can I request a custom illustration for my project?
Yes, though it is usually rolled into a larger engagement rather than sold alone. The vocabulary transfers cleanly to a new brand with a palette swap.
Do these work on mobile?
Yes. The canvas is sized to the container, device pixel ratio is respected, and the draw loop pauses off-screen so scrolling does not stutter.