A generative brand-kit tool. Type a brand name and a tagline, shuffle the seed, and a rule-based system builds a logo mark, a five-colour palette, a repeating pattern and the pieces a studio would show a client on one board: logo lockup, poster, stationery, social post, app icons and a type specimen. Every piece exports: the lockup, mark and pattern as SVG, the palette as CSS custom properties, the board as PNG. The address bar always holds the full recipe, so a copied link rebuilds the exact same kit.

Why this example: generative identity and poster tools are the most common commercial use of p5.js today (design studios and schools build "dynamic branding" generators that export assets), and a tool that produces files people can use shows more than a pretty sketch.

How it's built

• One recipe, two renderers. core/kit.ts turns the input into plain shape data in a unit square (circles, arcs, wedges, polygons, polylines) with no p5 import. p5.js draws those shapes on the board, and core/svg.ts writes the same shapes as SVG, so the export always matches the screen.
• Seeded, reproducible. A small mulberry32 generator seeded by the seed number mixed with an FNV-1a hash of the name drives every choice. Same name and seed, same kit, on any device. The flow mark uses its own seeded value noise instead of p5's noise(), so the core runs outside p5 and in tests.
• Five mark systems. Orbit (concentric arc segments around a core), Tiles (a grid of quarter discs, half discs, triangles and squares), Flow (lines traced through a noise field, clipped to a disc), Bloom (petals in 5- to 12-fold symmetry) and Letter (the first letter of the name set into a disc, square or dome with an accent arc). The Detail slider adds rings, cells, lines or a second petal ring.
• Seamless patterns. Orbit, Flow and Bloom kits get a 4 x 4 block of Truchet arcs: every cell joins edge midpoints, so the block repeats without seams; Tiles and Letter kits repeat a block of their own tile shapes.
• Board polish. Artboards rise in one after another with soft shadows; the poster gets a grid, a numbered meta line and film grain (one 160 px noise tile made once); the cards are drawn turned over each other; Construction guides adds dashed circles, axes, a clear-space frame and the baseline. The page header takes the brand's colours and name.
• Palettes in OKLCH. Hues are picked by harmony (complementary, analogous, triad, mono) and lightness is set per role in OKLCH, so colours of the same role look equally bright across hues. Out-of-gamut colours are brought in by lowering chroma. Ink on paper always passes WCAG AA (a unit test checks 800 seeds), and the panel shows the ratio.
• p5.js in instance mode, loaded on demand. p5 2.3 lives only in this page's chunk and is imported after the component mounts; remove() cleans it up on unmount. The Friendly Error System is off.
• A loop that sleeps. The board animates only during the 1.5 s build-in after each change and in Live mode (poster turns, pattern and social band drift, poster, pattern and social mark follow the pointer); otherwise p5's loop is stopped and the board is redrawn once per change. It also stops when the board scrolls out of view or the tab is hidden.
• Cached still artboards. The lockup, mark, stationery, palette, app icons and type specimen are drawn once per kit into an offscreen createGraphics buffer; each live frame only blits that buffer and redraws the poster, the pattern and the social post.
• Measured text. Centred and right-aligned text on the offscreen buffer is placed by measuring with textWidth, because textAlign there gave left-aligned results in p5 2.3.
• Pixel density capped at 2, and 1 on the light tier.
• Responsive board. core/layout.ts places the nine artboards in one, two or three columns by width; a unit test checks that they never overlap.
• Everything readable is HTML. Controls are native inputs and radio groups; the canvas is aria-hidden and a text summary lists the palette. R shuffles from anywhere outside text fields; a polite live region confirms shuffles and copied links.
• Reduced motion. No build-in, no live motion; the board is drawn once per change.
• Fonts. The three typefaces are system font stacks, so the exported SVG text names the same families and needs no font files.