Geometric pattern generator — grids of shapes in your palette

How to use the geometric pattern generator

1. Choose Shapes: Mixed, Triangles, Circles, Quarter circles, Half circles, Lines or Squares.
2. Set Columns and Rows (1–30 each) and the Cell size in pixels (10–200).
3. Paste your colours into Palette (hex, comma-separated).
4. Pick a Background colour that shows between and behind the shapes.
5. Change Seed until the layout feels balanced, then download geometric-pattern.svg.

What it does and when to use it

Grids of simple shapes in a few strong colours are a popular look for posters, book covers, slide title pages, event banners and blog headers. Making one by hand means drawing and rotating dozens of shapes; this tool does the placement for you and lets you try many layouts quickly.

Unlike a repeating tile, every cell here is chosen on its own, so the pattern does not repeat. If you need a small tile that repeats seamlessly, use the SVG pattern generator instead. For loose, overlapping shapes rather than a strict grid, try the abstract background generator. To build a palette that suits your brand first, the colour palette generator can help.

How it works

The tool walks the grid row by row. For each cell it uses a seeded random number generator to choose:

• the shape (only when Shapes is Mixed),
• a rotation of 0°, 90°, 180° or 270° around the cell centre,
• one colour from your palette.

The shapes are drawn inside each cell: a right triangle covering half the cell, a circle with a radius of 20–45% of the cell, a quarter circle filling one corner, a half circle on one edge, a centred square at 60% of the cell, or a thick diagonal line. Each cell becomes a <g> element moved into place with translate and rotate. The tool runs in your browser and uploads nothing.

Worked examples

Default grid. Mixed shapes, 8 columns, 5 rows, 60 px cells, seed 1. The file is viewBox="0 0 480 300" with a #fefae0 background rectangle and 40 shape groups.

Four circles. Circles, 2 × 2, cell 50. The first cell holds <circle cx="25" cy="25" r="13.3" fill="#2a9d8f"/>; the other three get different sizes and colours from the default palette.

Two-colour quarter circles. Quarter circles, 2 × 1, cell 40, palette #111827, #f59e0b. The first shape is <path d="M0,0 H40 A40,40 0 0 1 0,40Z" fill="#111827"/>, turned 270°, and the second is amber, turned 90°.

Limits and tips

• Up to 30 × 30 cells (900 shapes). Big grids make larger files, so keep cells as large as the design allows.
• Three to five colours with one dark and one light usually read more clearly than many similar shades.
• Every shape stays inside its cell except the diagonal lines, whose square ends poke slightly past the cell corners.