◈ lib · pattern-press
The Pattern Press
Four generative pattern families — Truchet tilings, flow fields, isometric lattices and interference meshes — resolved to primitives once and rendered through canvas, SVG, or a dependency-free software rasteriser, so the vectors you paste are the pixels you saw. Deterministic in its seed and inked entirely from your own tokens.
A working specimen.
All families support Canvas and SVG. Native repeating CSS is available for interference; repeating an arbitrary crop is a seam test.
Minimal example · selected parameters
Mount <canvas width="600" height="360"></canvas> before running this code. Run pixel-buffer functions in a worker for larger outputs.
import { drawPattern, describePattern, patternToCss } from '@/lib/render/patterns';
const state = {
"family": "truchet",
"seed": 1420,
"scale": 40,
"weight": 1,
"bias": 0.5,
"density": 0.3
};
const ink = {"paper":"#f0e9dc","ink":"#252d32","accent":"#a9573c"};
drawPattern(document.querySelector('canvas').getContext('2d'), 600, 360, state, ink);
const svg = describePattern(600, 360, state, ink);
const css = patternToCss(state, ink); // null except interferenceCopies component source and tokens directly into your repository with requirements listed for this item: no additional npm dependencies beyond the host framework.
Open-source under MIT. We preserve the source header comment, and invite you to credit the archive on your project's /about, /colophon, or footer. Display our Archival Colophon Seal or copy a citation snippet below. Sites displaying the seal are welcome to submit to our Federation Showcase!
Source
lib/render/patterns.ts
Registry item: /r/pattern-press.json