← 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
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.
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.
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.
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.
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.