Geometric Pattern Generator
Choose a style, pick colors, export PNG — everything runs in your browser
Geometric pattern generator for designers and makers
This tool generates tileable geometric patterns directly in your browser using the HTML5 Canvas API — nothing is uploaded, nothing is processed on a server, and there's no account to create. Adjust the grid, pick a style, dial in your colors and hit Download. What you get is a square PNG at whatever resolution you set, ready to drop into Figma, Photoshop, Procreate, or a CSS background.
Both styles were built around a small set of geometric primitives — rectangles, circles, diagonals — arranged on a strict grid. The Bauhaus mode mixes quarter-circles, semicircles and triangles per cell. Mondrian mode divides each cell into two or three color blocks with a subtle grid line between them, mimicking the compositional logic of De Stijl paintings without literally copying them.
Every pattern is generated from a numeric seed fed into a lightweight LCG random number generator. The same seed always produces the same pattern — which means you can reproduce a specific result just by using the same seed number. Hitting "Random" picks a new seed and redraws immediately. Type any number between 0 and 999999 to lock in a pattern you like.
The harmony buttons — Complementary, Analogous, Triadic, Split-comp, Tetradic, Monochromatic, Pastel, Earthy — derive all four palette colors from the hue of your first swatch using standard color theory relationships. They're a fast way to get a coherent palette when you know the mood you want but don't want to pick every hex manually. You can always override any individual color after applying a harmony.
The slider goes from 400px to 2400px. 1200px is a good default for web use — sharp enough for retina screens, small enough to stay under most file size limits. For print, go to 2400px. The canvas is always square, so the output tiles cleanly in any direction. The download is a lossless PNG, so there's no compression artifacting on hard geometric edges.
The diagonal stripe overlay draws a fine white hatching across every cell at about 20% opacity — it adds texture without washing out the colors underneath, useful for backgrounds that need to feel designed rather than flat. Grid lines draw thin black borders between cells at around 15% opacity, which helps define the tile structure when palette colors are similar in tone.
Surface pattern design for print-on-demand (Redbubble, Society6, Zazzle). CSS background tiles for web projects. Texture overlays in Figma or Sketch. Social media post backgrounds. Wrapping paper and packaging mockups. Brand pattern systems for identity work. Album artwork. The square format works directly as a repeating CSS background-image or an Instagram post.
Frequently asked questions
Yes — all styles use a strict grid where each cell is drawn independently within its own clipped rectangle. When you tile the exported square, the edges meet cleanly with no gaps or overlaps. Styles like Mixed circles and Pinwheel have cells that look like they cross the boundary, but the clip ensures they don't.
Yes. Everything generated here is yours to use however you like — sell it, print it, build products with it. The small colorsforge.app text baked into the corner of the canvas is a light attribution, not a license restriction.
Geometric tile patterns repeat in both directions, so the repeating unit is almost always square. A square PNG tiles cleanly as a CSS background fill or a Figma component fill without cropping or distortion. If you need a rectangular crop, open the PNG in any image editor after export.
Yes, once the page has loaded. All drawing happens in the browser using the Canvas API — there are no server calls during generation or export. The PNG download is created entirely client-side.