SVG pattern generator.

Twelve: dots, grid, lines, crosses, checks, diamonds, zigzag, waves, hexagons, triangles, topography and circuits. Each is one tile that repeats with no visible seam, in your colors, scale, line weight and opacity.

Topography draws the contour lines of a smooth field that repeats exactly with the tile, and circuits walks its traces on a grid that wraps around. A line that leaves one edge comes back at the other, so the tiles meet without a join. Both draw a new variation from the seed.

A tile is a few hundred bytes to a few kilobytes, stays sharp on any screen, and its colors live in the code, where changing one takes a second. The browser repeats it to fill any size.

Copy the Tailwind tab: a background color and a bg-[url(…)] class holding the tile as a data URI, escaped so the class works as it is. Put it on any element; the tile repeats by itself.

Copy CSS, a Tailwind class, the data URI or the tile's SVG. Download one tile, or a picture filled with the pattern at a desktop, square or Open Graph size, as SVG, PNG or WebP.

No. Everything is made in your browser and nothing is uploaded.

No. The SVG pattern generator is free and opens without a sign-in, an account or an install.

Closest to the SVG pattern generator: SVG wave generator, SVG blob generator, Mesh gradient generator, SVG to data URI converter. Each opens on its own page, free and in the browser.

The SVG pattern generator is one of 11 in its group. The group's page, /tools/design, lists them all.

The tool is free. Its interface is built from shadcn.io's own components (Button, Input, Slider and the rest of the registry under /ui), which come in React, Vue, Svelte and Solid. Pro adds the blocks and templates for the product around it.