SVG pattern generator
Download a seamless single-tile SVG for dot, grid or diagonal web backgrounds.
- 1Add input
- 2Adjust settings
- 3Get your result
Tool input and files are processed in this browser without being uploaded.
Before you start
Choose a motif, size and colors, then preview a repeated field. Download the exact one-tile SVG and use it at its intrinsic pixel size as a CSS background.
How to use this tool
- Choose dots, grid or diagonal lines and set the tile size, dot radius or line width, foreground and background colors.
- Generate the pattern and inspect the larger repeated preview for density and tile alignment.
- Download result.svg, or copy the SVG and CSS example. Keep the file path and intrinsic tile size when applying the CSS.
Supported inputs and limits
Dot, grid and diagonal motifs only; 4–200px whole-pixel tiles, dot radius or line width 0.5px to half the tile size, and six-digit HEX colors.
Keep the tile at its intrinsic size for aligned repetition. Percentage background sizing or fractional scaling can show browser seams; check contrast in the final design.
Worked example
Example input
{"pattern":"dots","size":24,"radius":2,"color":"#0b876f","background":"#f3f7f5"}Example options
{"pattern":"dots","size":24,"radius":2,"color":"#0b876f","background":"#f3f7f5"}Example output
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="#f3f7f5"/><circle cx="12" cy="12" r="2" fill="#0b876f"/></svg>
When something does not work
Use a 4–200px whole-pixel tile, a radius or line width from 0.5px to half that size, and two six-digit HEX colors.
Frequently asked questions
What does the download contain?
result.svg contains one tile at the chosen pixel width and height. The on-page preview repeats it across a larger field.
Will it stay seamless with any CSS background size?
The tile is designed to align when repeated at its intrinsic size. Percentage or fractional resizing can create browser seams, so check the final page.
Does this check text contrast?
No. Inspect text readability and contrast on the actual page; the preview is for pattern density and alignment.
Is my input sent to a server?
No. The tile is generated in your browser; save the SVG you need before leaving the tab.
Documentation & further reading
Related tools
Color converter
Same color. A different format.
Contrast checker
Check the contrast between text and background colors.
Gradient maker
Find a blend you love. Copy the CSS.
Palette and color mixing
Generate rule-based palettes or compare weighted RGB color mixtures.