Polyominoes

Polyominoes are the siblings of dominoes: shapes made of squares joined edge to edge. This tool packs a whole canvas with them. Every cell of a grid gets claimed by a short random walk, so the surface fills with irregular interlocking blocks — drawn as thin outlines, or as flat fields of colour. Try it here.

• Two styles - Outline draws just the boundaries of each shape; Color fills them from a palette. Switching restores the whole look for that mode, geometry included
• Shape - Polyomino size sets how many cells a shape tries to claim, cell size sets how big those cells are, and jitter pushes every lattice point off true so nothing lines up perfectly
• Palettes - Random, mono, warm, cool, earth, pastel or neon, with an opacity slider on top
• Outline and grid - Both togglable, with their own colour and stroke weight, so you can show the lattice the shapes were cut from
• Canvas - Width, height, margin and background, up to 4000px
• Export - Download as SVG or PNG, or copy a link

The fill works by walking the grid cell by cell. The first unclaimed cell it finds becomes the start of a new polyomino, which grows by stepping to a random free neighbour until it hits its target size or runs out of room — so shapes near the end of the pass come out smaller, wedged into whatever the earlier ones left behind. The grid itself is a lattice of points with a random offset applied to each, and every shape is drawn against those offset corners, which is why the edges wobble.

Every composition comes from a numeric seed, and every setting lives in the URL hash — so a link is the whole piece, and the same link always redraws the same image. Rendering goes through p5.js in SVG mode, which means the download is real vector geometry rather than a traced bitmap.

It started as one of the first things I built while messing around with AI coding tools, and polyominoes were the part I most enjoyed learning about — this is that sketch grown up. Source on GitHub. Try it here.