Free tools
English
SVG pattern generator
Generate dot, stripe or grid SVG patterns with chosen colors and spacing. Use it in your browser, with no account required.
No account needed
Loading tool…
How to use
- 1Enter your values and choose the options.
- 2Run the tool and review the result.
- 3Copy the result or save it as a file.
Good to know
Check the input ranges and units. Your inputs are processed in this browser.
Ads may process connection data. Personalization follows your privacy choices. Privacy (English)
Worked input and output example
These results come from this tool’s actual engine using the sample values below, not your personal input or saved work. Load the example in the tool to inspect the same inputs.
Example input
| Field | Value |
|---|---|
| Mode | Dots |
| Color | #0F766E |
| Background color | #FFFFFF |
| Pattern spacing (px) | 24 |
| Stroke or dot radius (px) | 2 |
Example result
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><defs><pattern id="p" width="24" height="24" patternUnits="userSpaceOnUse"><rect width="24" height="24" fill="#FFFFFF"/><circle cx="12" cy="12" r="2" fill="#0F766E"/></pattern></defs><rect width="400" height="400" fill="url(#p)"/></svg>
Input constraints
These are the actual input validation limits; they are not a guarantee that every accepted value is realistic or that a model applies to your situation.
- Mode: Available options: Dots / Stripes / Grid
- Pattern spacing (px): Accepted range: 4 ≤ x ≤ 200
- Stroke or dot radius (px): Accepted range: 0.1 ≤ x ≤ 20