SVG pattern generator

How the tiling works

Everything here is built from one square tile. The motif is drawn once into that tile with its geometry arranged so the edges continue into each other — a dot centred in the square, grid lines running along two edges, rings inset by their own stroke width so nothing pokes over the boundary. The diagonal stripes are the interesting case: a 45° line that simply crossed the tile would break at the corners when repeated, so the tile carries the centre stroke plus an extra clipped stroke in each corner, and the three meet their neighbours' strokes exactly.

The tile is then delivered two ways. The SVG output is a demo sheet: the tile sits in a <pattern> element with patternUnits="userSpaceOnUse" — meaning the tile's width and height are fixed drawing units, not fractions of whatever shape it fills — and an 800 × 480 rectangle is filled with it so you can judge the rhythm at real density. The CSS output skips the sheet entirely: one tile, URL-encoded as a data URI on background-image, with background-repeat doing the tiling. Both are assembled in your browser; no pattern is generated on a server.

The six motifs

Dots is a filled circle whose radius is the weight value — the quietest texture of the six, and the safest behind text. Grid draws the top and left edges of each tile, which repeat into full graph paper. Stripes is the 45° diagonal — the loudest motif, best kept low-contrast. Crosses centres a small plus sign in each tile with rounded line caps, a print-like texture that stays polite at small sizes. Zigzag runs a chevron across the tile width, the most directional of the set. Rings inscribes an unfilled circle sized to the tile — at large tile sizes it reads as circles, at small sizes it tightens into a dense honeycomb-like weave. The same size and weight settings mean something different to each motif, so switching motifs is worth re-checking both sliders.

Tile size, weight and the two colours

Tile size (8–80px) sets the repeat distance — the density of the texture. Weight (1–10px, in half-pixel steps) is the stroke width of the line motifs and the dot radius for dots; it is what separates a hairline texture from a chunky one. The ratio between the two matters more than either number: a 2px line in a 12px tile is a busy weave, the same line in a 64px tile is sparse pinstripe. Colour paints the motif, and the background is transparent by default so the pattern sits on whatever the page already has. Ticking Background color bakes a solid rectangle behind the motif instead — useful when the asset has to be self-contained, such as a tile exported for a slide deck or an email, where "whatever is behind it" is not under your control.

Using the CSS output

The CSS block is ready to paste: a class with the encoded tile on background-image and background-repeat: repeat. The encoding swaps the characters that break CSS URLs — # becomes %23, angle brackets are escaped, double quotes become single — which is the same treatment the Data URI tool applies to whole files. Because the image is inside the stylesheet, the pattern costs no network request and cannot flash in late after the page paints.

Two properties are worth knowing on top of what is generated. Adding background-size rescales the tile without regenerating anything — the tile is vector, so background-size: 48px 48px on a 24px tile is perfectly sharp, including on high-DPI screens. And background-attachment: fixed pins the texture to the viewport so content scrolls over a stationary weave — cheap depth, though worth testing on mobile browsers, which handle it inconsistently.

Using the SVG output and the pattern element

The SVG sheet is the version to take into design tools, or to build on. The <pattern> in its <defs> is reusable: any shape in the same SVG can take fill="url(#tile)", so filling a generated blob or a headline from Text to Path with dots or stripes is a copy-paste job — replace the sheet's rectangle with your own shape and keep the defs. Because the pattern uses userSpaceOnUse, the texture stays the same density whatever shape it fills; it will not stretch to fit the way objectBoundingBox patterns do. The editor on this site will open the sheet if you would rather compose there.

Common problems

• The pattern shimmers or looks muddy. Small tiles with thin weights alias on low-DPI screens. Grow the tile size or the weight until the motif has real pixels to live in — or scale up with background-size after the fact.
• It fights the content in front of it. Patterns are texture, not figure. Drop the contrast between motif and background to something like 5–10% lightness difference; if body text sits on top, halve that again.
• Dark mode inverts the page but not the pattern. The colours are baked into the data URI. Generate a second tile for dark mode and swap it with a CSS custom property or a class on the root element.
• The CSS breaks when pasted into an inline style attribute. The generated URL uses double quotes around a URI that contains single quotes; inside an HTML style="" attribute those collide. Keep it in a stylesheet, where it belongs anyway.