1-bit art from any string.
Give every user, post or product its own dithered cover art, drawn from a seed. The same seed always gives the same picture, so there is nothing to store. Six scenes, four dithering methods, zero dependencies.
npm install dither-art
Open the playground
Type a seed
Every scene, drawn from whatever you type. Try your name.
Four ways to dither
One bit per pixel: every pixel is either ink or paper, with nothing in between. The greys are an illusion made of dots, and each method arranges them differently. Same seed, same scene throughout.
Three lines to use it
Ink is currentColor, so the art follows your theme and dark mode.
import { ditherPixels, toSVG } from "dither-art";
const px = ditherPixels(320, 180, user.id);
cover.innerHTML = toSVG(px, 320, 180, { scale: 2 });Deterministic
Pixel-identical on Node, Bun, Deno and browsers. Pictures are pinned by tests, so they never change within a major version.
SVG, canvas or server
toSVG for HTML and image routes, toRGBA for canvas. Runs anywhere JavaScript does.
Bring your own
Dither your own images with dither(), or write a custom scene in a few lines.
Tiny
About 6 KB minified and gzipped. No dependencies. TypeScript types included.