Choose one of ten tile shapes, set the tile size, line width, colours, opacity and angle, and get a seamless SVG background. Copy it as a CSS background-image data URL that repeats on any element, or as an SVG file built on the pattern element for use inside artwork, both drawn and previewed in your browser.
| Need | Reach for | Why |
|---|---|---|
| Curves, hexagons, waves, plus signs | SVG tile (this tool) | Any shape SVG can draw |
| Plain stripes, dots, checks | CSS gradients | No image at all, see the CSS background generator |
| Pattern inside an SVG illustration | <pattern> element | Fills any SVG shape |
Updated
Gradient tricks can draw stripes and dots, but they struggle with waves, hexagons and outlines. A small SVG tile can draw anything and stays sharp at every zoom level, and as a data URL it adds no extra request to the page.
Patterns: Polka dots, Graph grid, Diagonal lines, Plus signs, Zigzag, Waves, Triangles, Checkerboard, Rings, Hexagons. Set size, line width, colours, opacity and angle, then copy CSS or SVG.
| Attribute | Default | What it does |
|---|---|---|
| width / height | 0 | Size of one tile; a value of 0 draws nothing |
| patternUnits | objectBoundingBox | Units for x, y, width, height; this tool uses userSpaceOnUse |
| patternContentUnits | userSpaceOnUse | Units for the shapes inside the tile |
| patternTransform | none (identity) | Rotate, scale or skew the whole pattern |
| x / y | 0 | Shift where the first tile starts |
A 28 pixel hexagon tile at half opacity. Change background-size to scale the texture.
<style>
.pattern {
background-color: #f8fafc;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' fill='%23f8fafc'/%3E%3Cg opacity='0.5'%3E%3Cpath d='M 7 0 L 21 0 L 28 14 L 21 28 L 7 28 L 0 14 Z' fill='none' stroke='%234f98fb' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
background-size: 28px 28px;
}
.pattern { padding: 40px 16px; border-radius: 14px }
.card { max-width: 260px; margin: auto; padding: 16px; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgb(0 0 0 / .08) }
</style>
<div class="pattern"><div class="card">Content sits on a plain card above the pattern.</div></div>Use this inside inline SVG artwork. Any shape can take fill="url(#p)".
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<pattern id="p" width="28" height="28" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
<rect width="28" height="28" fill="#f8fafc"/>
<g opacity="0.5"><path d="M 7 0 L 21 0 L 28 14 L 21 28 L 7 28 L 0 14 Z" fill="none" stroke="#4f98fb" stroke-width="1.5"/></g>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#p)"/>
</svg>A tile repeats edge to edge, so anything leaving the right side must come back on the left. The diagonal pattern, for example, draws short extra segments in two corners so the lines continue across tile borders without a gap.
Strokes centred on the tile edge, as in the grid, are cut in half by the tile. Two neighbouring tiles then add up to a single full-width line, which is why the grid looks even.
For backgrounds, a CSS data URL is simplest: one rule, no file to host, and background-size controls the scale. The browser decodes the tile once and repeats it.
Inside an SVG illustration, define a pattern in defs and fill shapes with url(#id). patternTransform can rotate or scale the whole pattern without redrawing it.
Inside a URL, # starts a fragment and cuts the image short, and some parsers reject raw angle brackets. Encoding them as %23, %3C and %3E keeps the SVG intact. Double quotes become single quotes so the string fits inside url("...").
It measures the tile's width and height in the same units as the drawing, so a 24 tile is 24 pixels wide wherever it is used. The default, objectBoundingBox, sizes tiles as fractions of the filled shape instead.
Yes. Add the CSS rule to your stylesheet as a class, or use arbitrary values such as bg-[url(...)] with the data URL. A class is easier to read when the URL is long.
Yes. Each tile is drawn from simple shapes by the code on this page, so the output belongs to you with no credit needed.
Related: CSS background generator, Mesh gradient generator, CSS gradient generator, Colour contrast checker, CSS variables guide.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.