← All Tools
SVG Pattern Builder🔒 100% local
Create seamless SVG patterns (dots, lines, grids, crosses) for backgrounds and designs.
Pattern Type
Element Size
Spacing
Stroke Width
Color
Background
SVG Pattern Builder: related tools
Builds a seamless tiling pattern as an SVG. Pick dots, diagonal lines, a grid or crosses, then set the element size, the tile spacing, the stroke width, a foreground colour and a background colour. The tool emits a pattern definition plus a rectangle painted with it, and previews the result beside the source.
SVG Pattern Builder: how to use it
- Choose the pattern type from the dropdown.
- Set Element Size, Spacing, Stroke Width and the two colours.
- Press Generate Pattern to fill the preview and the source box.
- Copy the SVG and paste it into your page, scaling the width and height on the consuming element if you need more than one tile.
SVG Pattern Builder: worked example
dots, size 20, spacing 40, stroke 1, colour #CC2B22becomes<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="none"/>
<pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<circle cx="20" cy="20" r="10" fill="#CC2B22"/>
</pattern>
<rect width="100%" height="100%" fill="url(#pattern)"/>
</svg>The transparent background becomes fill="none"; the tool's colour field cannot express the word transparent, so this is the state the page opens in.
crosses, spacing 40, stroke 3, colour #000000becomes<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="none"/>
<pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<line x1="20" y1="0" x2="20" y2="40" stroke="#000000" stroke-width="3"/>
<line x1="0" y1="20" x2="40" y2="20" stroke="#000000" stroke-width="3"/>
</pattern>
<rect width="100%" height="100%" fill="url(#pattern)"/>
</svg>The source indentation inside the pattern block is carried straight into the output, and stroke-width only appears on this shape.
SVG Pattern Builder: when to use it
- Making a subtle dotted or grid background for a page section.
- Producing a repeating cross-hatch for a chart or diagram background.
- Getting a pattern definition to paste into an existing SVG instead of shipping a raster image.
SVG Pattern Builder: what it does not do
- Stroke width applies only to lines, grid and crosses. The dots pattern ignores the setting completely.
- Element size means a diameter for dots but a segment length for the line shapes, and nothing is clipped to the tile: Size 100 with Spacing 10 emits a circle of radius 50 inside a 10 by 10 tile, so you see only a corner of it.
- Spacing sets the tile width and height together, so every tile is square - there is no separate horizontal and vertical control.
- The output is exactly one tile wide and tall, so anything larger than a tile is a matter of scaling the SVG where you use it.