SVG Pattern Gallery
Seamless SVG background patterns as copy-ready data URIs.
| Pattern | Preview | Data URI |
|---|---|---|
| Dots | url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%222%22%20fill%3D%22%233b82f6%22%2F%3E%3C%2Fsvg%3E") | |
| Crosshatch | url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%3E%3Cpath%20d%3D%22M0%2040%20L40%200%20M-10%2010%20L10%20-10%20M30%2050%20L50%2030%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") | |
| Stripes | url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%3E%3Cpath%20d%3D%22M-10%2030%20L30%20-10%20M-10%2050%20L50%20-10%20M-10%2010%20L10%20-10%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") | |
| Checkerboard | url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23222%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23222%22%2F%3E%3C%2Fsvg%3E") | |
| Grid | url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M20%200%20L0%200%200%2020%22%20fill%3D%22none%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%220.5%22%2F%3E%3C%2Fsvg%3E") | |
| Triangles | url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%3E%3Cpolygon%20points%3D%220%2C0%2020%2C40%2040%2C0%22%20fill%3D%22%233b82f6%22%2F%3E%3C%2Fsvg%3E") | |
| Waves | url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M0%2010%20Q20%200%2040%2010%20T80%2010%22%20fill%3D%22none%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") | |
| Hexagons | url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M28%200%20L56%2016%20L56%2050%20L28%2066%20L0%2050%20L0%2016%20Z%20M28%2066%20L56%2082%20L56%20100%20L0%20100%20L0%2082%20Z%22%20fill%3D%22none%22%20stroke%3D%22%233b82f6%22%2F%3E%3C%2Fsvg%3E") |
About this tool
A small curated set of seamless SVG patterns — dots, stripes, hexagons, waves, etc. Pick a colour and copy the URL-encoded data URI for CSS background-image.