MicroGfx

A tiny, dependency-free library for generating hand-drawn "technical instrument" graphics — fake telemetry cards, spec labels, and contact-sheet posters — as pure SVG. Hit Lucky and it composes a new one; export to PNG or SVG.

Run it

No build step, no server. Just open the studio:

open index.html      # macOS  (or double-click the file)

• Space — new draw (Lucky)
• 1 / 2 / 3 — Card / Banner / Poster modes
• P / S — export PNG / SVG
• Theme dropdown — pick a palette or Auto
• Click the seed to copy it (same seed always reproduces the same piece)

What it makes

Eight themes ship in the registry — gray, orange, cream, acid-on-black, lavender, olive, steel, sand:

How it works

Everything is built from three composable layers, which is what lets one small codebase span cards, banners, and posters:

1. ELEMENTS   ~25 self-measuring components:  (ctx) => { svg, h }
              brandLine · eyebrow · bigDisplay · dataTable · barcode · qrcode
              · dataMatrix · lineChart · waveform · dimension · pillRow · iconRow
              · titleBar · bracketRule · coordReadout · hatch · spring · dividers · footer
2. LAYOUT     recursive containers  stack() / row()  — themselves elements,
              so a row can hold a stack that holds a row (the "QR + readouts" splits)
3. COMPOSE    a grammar of templates that assembles elements into whole cards

Because every element reports its own height, containers flow them automatically — no manual coordinate math, and layout nests arbitrarily.

The hand-drawn look is two SVG filters:

• #warp — feTurbulence → feDisplacementMap distorts every stroke and glyph uniformly, so the whole thing reads as sketched by one hand.
• #erode — a turbulence alpha-mask composited into heavy fills only (barcodes, QR, inverted bars) for the screen-printed grain.

API

const gen = MicroGfx.generate({ mode: "poster", theme: "orange", seed: 42 });
// -> { inner, w, h, seed, theme }     inner = the SVG body markup

d