SVG Pattern Generator
Generate seamless, tileable SVG patterns (dots, stripes, grid, diagonal) with custom size and colors. Copy the SVG.
Pure browser JavaScript — generates tileable SVG patterns locally.
How to use this tool
- Pick a pattern style.
- Adjust tile size, line thickness, and the two colors.
- Copy the SVG or download it as a seamless tile.
Generate seamless, tileable SVG patterns (dots, stripes, grid, diagonal) with custom size and colors. Copy the SVG.
How it works
The SVG Pattern Generator creates seamlessly tileable SVG background patterns in styles such as dots, stripes, grids, and diagonals. Adjust the size, spacing, and colors, then copy the SVG markup to use as a CSS background or embed it directly in HTML.
Each pattern is built using an SVG pattern element with a patternUnits attribute, defining a tile that repeats infinitely in both directions. Because the tile edges align perfectly, the pattern has no visible seams.
You can use the exported SVG as a standalone file, or encode it as a data URL for a CSS background-image property. The pattern scales without pixelation at any size, making it ideal for textured backgrounds, section fills, and watermarks.
Choosing high-contrast colors produces bold graphic patterns while low-contrast combinations (such as light grey on white) create subtle textures that add depth without competing with page content.
Worked example
Add a dot grid background to a section
- Select the Dots pattern type.
- Set dot size to 3px and spacing to 20px.
- Set dot color to a light grey (#d1d5db) and background color to white.
- Copy the SVG.
- Encode it as a data URL and set it as background-image on your section element.
A subtle dot grid texture covering the section background, adding depth without distracting from content.
Common mistakes to avoid
- Forgetting to URL-encode the SVG when using it as a data URL — characters like #, <, and > must be encoded or the CSS value will break.
- Using a pattern tile size that is inconsistent with the element dimensions, though partial tiles at edges are generally acceptable since CSS background clips them.
- Setting stroke width too large relative to the tile size, causing stripes or dots to merge and fill the entire background.
Key terms
- SVG pattern element
- An SVG element that defines a repeating tile shape; any content inside it repeats across the area it is applied to.
- Tileable / seamless
- A pattern whose edges match up perfectly when repeated, creating a continuous texture with no visible joints.
- Data URL
- A way to embed file contents directly in a URL string using base64 or URL encoding, allowing an SVG to be used as a CSS background-image without a separate file.
Frequently asked questions
- Are the patterns seamless?
- Yes — they use SVG
with patternUnits="userSpaceOnUse", so the tile repeats perfectly at any size.