GLYPH

A rule-based micro-graphic generator. One zero-dependency HTML file that procedurally assembles small technical / industrial "spec-sheet" graphics — and exports them as SVG or PNG, with an optional printed-on-paper look and transparent backgrounds.

▶ Try it live → danhdox.github.io/glyph

Inspired by Chad Ashley's HTML micro-graphic generator.

---

What it is

GLYPH generates small, monochrome, faux-industrial graphics — the kind of "spec card" you'd imagine stamped on a shipping crate or a sci-fi control panel: brand marks, build tags, data readouts, barcodes, QR blocks, waveforms, target reticles and katakana flavor text, all composed by rules.

Everything is drawn as SVG on a 1000×1000 board, so the same output exports losslessly to SVG or rasterizes cleanly to PNG. Each glyph is produced from a string seed via a seeded PRNG — so any glyph is fully reproducible. Paste a seed and you get the exact same result.

Run it

No build, no install, no dependencies.

# Option A — just open the file
open index.html            # macOS  (or double-click it)

# Option B — serve the folder (any static server works)
python3 -m http.server 4123
# then visit http://localhost:4123

Or use the hosted version: https://danhdox.github.io/glyph/

Controls

Action
◈ Lucky / space	generate a new random glyph (seed + layout + palette)
Layout	cycle the four poster templates
Palette	cycle the 8 color schemes
Mode / G	toggle poster ↔ grid
Paper	toggle the analog print treatment (rough ink, mottle, stain, grain, vignette)
BG / T	toggle transparent background (alpha-channel export)
seed field	type any string for a reproducible glyph
scroll / drag	zoom (to cursor) / pan the canvas to inspect detail
dbl-click / 0 / ±	reset or step the zoom (vector stays crisp at any zoom)
↓ SVG / ↓ PNG / S / P	export the current glyph (both honor transparency)

How it works

The generator = rules + parts:

• Parts (m* functions): barcodes, QR blocks, bar charts, waveforms, dot matrices, target rings, data readouts, dividers, corner registration marks, and a rising-sun brand mark.
• Vocabulary: brand names, code words, katakana / kanji flavor, status strings, readout labels, and hex / serial codes.
• Layouts: four poster templates — ID TAG, SPEC SHEET, CONSOLE, MANIFEST — plus a GRID mode that tiles many mini-glyphs.
• Palettes: 8 two-tone ink / paper combos (light and dark).

Print emulation (the Paper toggle) fakes a real print with an SVG filter stack: feDisplacementMap roughens every ink edge (ink bleeding into fiber), mottle noise makes coverage uneven (imperfect transfer / riso feel), a large-scale "stain" gives cloudy paper tone, plus fine grain and a soft vignette.

Transparent (the BG toggle) drops the paper background and paper-texture layers so exports have a genuine alpha channel — the ink marks (still carrying the rough / mottled print texture) sit on transparency, ready to composite over anything. The QR codes are drawn ink-only, so their finder rings stay transparent too.

It's all in a single index.html (~600 lines) — read it top to bottom and every piece is right there.

Ideas / roadmap

• More part types (compasses, gauges, schematic wire routes, isometric icons).
• A "contact sheet" export that renders a full grid to one big PNG.
• URL-encoded seeds (?seed=…&pal=…&layout=…) for shareable links.
• Halftone / CMYK-dot ink texture and slight color misregistration.
• A strength slider for the print treatment; PNG resolution picker.

Contributing

Issues and PRs welcome. Because it's a single static file with no build step, hacking on it is as simple as editing index.html and refreshing the browser.

License

MIT © Andrew Do