SVG Pattern Generator
Design a seamless tileable SVG pattern and copy the reusable code.
About This Tool
Dots, lines, and crosses are all built on the native SVG <pattern> element, which tiles seamlessly at any scale without any extra math on your end. Drop the markup straight into an SVG background, or wrap it as a CSS background-image data URI.
Why patternUnits="userSpaceOnUse" matters here
SVG's <pattern> element defaults to objectBoundingBox units, where the tile's width and height are expressed as fractions (0 to 1) of whatever shape the pattern is filling, which makes the tile size depend entirely on how large the target element happens to be. This tool instead explicitly sets patternUnits="userSpaceOnUse", meaning the Spacing slider's pixel value is the tile's actual, absolute size in the SVG's coordinate space, regardless of how big or small the element being filled is. That's what makes the Spacing control behave predictably, a 24px spacing always means an actual 24-pixel repeat distance, not "24% of whatever box this ends up inside."
How a single short diagonal line becomes one continuous stripe
The Diagonal Lines option draws just one short line segment per tile, running from the bottom-left corner to the top-right corner of that tile's square. It looks like it shouldn't connect into anything continuous, but because every tile is identical and placed edge-to-edge with no gap, each tile's line segment picks up exactly where the neighboring tile's segment ends. The result, once tiled across a whole fill area, reads as one unbroken diagonal stripe running the full width and height of the pattern, even though the actual SVG markup only ever describes one small line inside one small square.
A real gotcha: pattern IDs collide if you paste this twice
The generated markup always uses id="tile" for the pattern definition. SVG element IDs are global to the entire HTML document they're placed in, not scoped to just their own <svg> block, so if you paste two separate copies of this generator's output onto the same page (say, two different pattern backgrounds on one page), both will reference fill="url(#tile)" and only the first pattern definition in the document will actually be used correctly, the second one's fill reference can end up pointing at the wrong pattern or failing to resolve as expected. If you need more than one pattern on the same page, rename the id and its matching url(#...) reference to something unique for each instance before pasting.
Getting this into a CSS background-image
The copied output is raw SVG markup, not a ready-to-use CSS value, so using it as a background-image requires one extra step: URL-encoding the SVG string and wrapping it in a url("data:image/svg+xml,...") declaration. Browsers need certain characters (like # and ") percent-encoded within a data URI for it to parse correctly as CSS. This tool intentionally outputs plain, readable SVG rather than a pre-encoded data URI, since raw markup is easier to inspect, edit, and drop directly into an <img> tag or inline SVG element, encoding it for background-image use is a deliberate extra step you'd add when that specific use case calls for it.
Why SVG patterns beat a repeating raster image here
A traditional tiled PNG background image needs a separate file, an HTTP request, and careful export at a resolution high enough to avoid blurring on high-DPI screens. An SVG pattern like these is pure vector markup, it costs nothing to load beyond the bytes of the code itself, renders at native sharpness on any screen density without needing 2x or 3x variants, and can be recolored instantly by editing a single fill or stroke attribute rather than re-exporting a new image file. The tradeoff is the same one that applies to any vector approach: these three shapes (dots, diagonal lines, crosses) cover simple geometric patterns well, but a genuinely photographic or hand-illustrated texture still needs a raster image.
How the crosses shape is built from two perpendicular lines
Each cross is just two short line elements drawn on top of each other, one horizontal and one vertical, both centered at the same point in the middle of the tile and sized proportionally to the tile's spacing (specifically, each line's half-length is 22% of the spacing value). Keeping the cross's arm length tied to the spacing rather than a fixed pixel number means the crosses scale sensibly together with the tile size, dragging the Spacing slider larger doesn't leave you with tiny crosses lost in wide gaps or oversized crosses that touch their neighbors, the proportion stays visually consistent at every spacing setting.
Frequently Asked Questions
Why does the tool use patternUnits="userSpaceOnUse" instead of the SVG default?
The SVG default (objectBoundingBox) expresses tile size as a fraction of whatever element the pattern fills, making the actual tile size depend on that element's dimensions. userSpaceOnUse makes the Spacing value an absolute pixel size instead, so the pattern's repeat distance stays consistent regardless of what it's applied to.
How does one short diagonal line per tile create a continuous stripe across the whole pattern?
Because every tile is identical and placed edge-to-edge with no gaps, each tile's line segment starts exactly where the previous tile's segment ended. Tiled across a large area, these individually short segments visually connect into one unbroken diagonal stripe.
What happens if I paste this generator's SVG code twice on the same page?
Both copies use the same id="tile" for their pattern definition, and SVG IDs are global to the whole document. The second pattern's fill reference can end up pointing at the wrong definition or failing to resolve. Rename the id and its url(#...) reference to something unique for each additional copy.
Can I paste the copied code directly into a CSS background-image property?
Not as-is, the output is plain, readable SVG markup rather than a pre-encoded data URI. You'll need to URL-encode the SVG string (percent-encoding characters like # and ") and wrap it in url("data:image/svg+xml,...") before it works as a CSS background-image value.
Will the pattern tile seamlessly at any size I scale it to?
Yes, since it's a vector SVG pattern rather than a raster image, it scales to any resolution without pixelating or showing visible seams between tiles, as long as the pattern's own width and height attributes match the spacing you generated it with.
Do I need any JavaScript for this pattern to render?
No, once copied, the SVG markup is entirely self-contained and static. JavaScript is only used within this tool itself to let you preview and adjust the pattern live before copying the final code.