为什么值得关注

它将俏皮的手绘风格与可组合的元素、布局和模板架构相结合，无需构建步骤或服务器——只需打开一个 HTML 文件即可开始创作。

适合谁使用

需要快速制作界面原型或数据可视化模拟的前端开发者
需要为演示或概念设计占位技术图形的设计师
探索使用 SVG 生成艺术的创意编程爱好者
希望制作趣味“科学”海报或假仪表盘的业余爱好者

典型使用场景

为仪表盘原型生成随机的遥测卡片模拟图
创建包含多种小型组合的联系单海报，用于墙面装饰
制作具有手绘风格的假想产品标签或规格表
为设计实验或社交媒体帖子快速导出 SVG 或 PNG 素材

项目优势

完全自包含——无依赖、无需构建步骤，仅需一个 HTML 文件即可运行
纯 SVG 输出——可缩放、轻量，可在任何矢量工具中编辑
通过运行时注册表可扩展——无需修改核心代码即可添加元素、模板或主题
可组合的三层架构（元素→布局→组合）使创建新布局变得简单

使用前须知

二维码和数据矩阵码仅为装饰——不编码真实数据
字体渲染依赖于系统字体——导出的 SVG 在不同机器上可能外观不同
不适用于生产环境中的真实数据；仅用于模拟和创意探索

README 快速开始

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

Mode	Description
Card	A single label whose height adapts to its content — a barcode card is short, a chart card is tall. Footer-anchored.
Banner	Wide corner-bracketed hero with big display type.
Poster	A masonry contact sheet of 12–16 mini-compositions sharing one theme.

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

项目描述

Create a SciFi SVG graphic interface

micro-gfx