satasuk03/micro-gfx

MicroGfx is a small, dependency-free library for generating sci-fi looking graphics that resemble hand-drawn technical instrument panels: fake telemetry cards, spec labels, and poster-style contact sheets, all built as pure SVG images. You can open its included studio page directly in a browser, no build step or server required, press a key to generate a new random design, and export the result as a PNG or SVG file. The library can produce three kinds of output. A card is a single label whose height automatically adjusts to fit its content, so a simple barcode card ends up short while a chart-heavy card ends up tall. A banner is a wide, corner-bracketed layout with large display text. A poster arranges twelve to sixteen small compositions together into one contact-sheet style image, all sharing the same visual theme. Eight built-in color themes are included, ranging from muted gray and cream tones to a bright acid-on-black look. Under the hood, everything is built from small, self-contained pieces called elements, roughly twenty five of them, things like a barcode, a QR code, a line chart, or a title bar. These elements are arranged using simple stacking and row containers that automatically flow content based on each element's reported height, so there is no manual coordinate math involved. The distinctive hand-drawn, slightly distorted look comes from two SVG filter effects layered on top: one that warps every line and letter uniformly, and another that adds a grainy, screen-printed texture to solid shapes like barcodes. Developers can call a simple generate function in JavaScript, passing in a mode, theme, and optional seed, and get back SVG markup ready to display or export. The library is also designed to be extended: new elements, themes, or layout templates can be added at runtime without touching the existing code. The project is written in TypeScript, bundled into a single JavaScript file with esbuild, and released under the MIT license.