Generate seamless tiling SVG patterns (stripes, dots, waves, chevrons) with color and scale controls.
You choose a motif - stripes, dots, waves, or chevrons - and the tool emits SVG markup: one repeat tile that the browser paints edge to edge across whatever rectangle it fills. Controls set motif geometry, tile size, and foreground and background colors, so the same pattern can read as fine texture or bold graphic. What most people get wrong first: a pattern tile is clipped to its own rectangle, not wrapped. A shape touching the tile edge is cut off, and unless the clipped halves rejoin cleanly with the neighboring tiles, you get a visible seam grid.
A concrete input and expected output from the current implementation.
Input
Pattern: dots. Tile: 20 x 20 px. Dot radius: 3 px. Color: #1C1C1E. Background: transparent.
Expected output
<pattern id="dotgrid" width="20" height="20" patternUnits="userSpaceOnUse"> <circle cx="0" cy="0" r="3" fill="#1C1C1E"/> <circle cx="10" cy="0" r="3" fill="#1C1C1E"/> <circle cx="0" cy="10" r="3" fill="#1C1C1E"/> <circle cx="10" cy="10" r="3" fill="#1C1C1E"/> </pattern>
Four circles at the corners and edge midpoints of a 20 px cell place a dot at every lattice point spaced 10 px apart in both directions: corner dots quarter across four tiles, edge-midpoint dots halve across two. Dot diameter is 6 px, so the gap between dots is 10 - 6 = 4 px, and every dot renders complete even though three of the four circles cross tile boundaries.
The generated pattern element declares a cell width and height, and the browser clips all drawing inside it to that cell, then tiles the cell across the filled shape. With patternUnits set to userSpaceOnUse the tile keeps its absolute pixel size no matter the element; under the default objectBoundingBox, width and height become fractions of the element, so the same pattern rescales when applied to a different-size shape.
A motif drawn across a tile boundary is simply cut there; the pattern only looks continuous when the cut pieces rejoin in the next tile. Recipes: dots on tile corners split into quarters that meet across four tiles, stripes span the full tile dimension, diagonals and waves are drawn through the corners, and stroked lines overhang the edge by half the stroke width so clipping does not shave them.
Motifs touching the tile edge are clipped there and never rejoin their neighbors. Redraw the boundary shapes so they wrap: dots on tile corners, stripes spanning the full tile dimension, diagonals drawn through corners, and stroked lines extended past the edge by half the stroke width. Painting a full-tile background rect can also mask tiny boundary mismatches.
Yes. Either point background-image at the exported SVG file, or inline the markup as a data URI. In a data URI, every # (such as the one in url(#id)) must be written %23, and angle brackets and quotes must be URL-encoded, or the fill reference breaks. One small tile covers an element of any size.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.