How to svg patterns vs css repeating patterns: which to use?
- Step 1Decide: is your pattern a shape or just colour bands? — Stripes, checks, grids, and starbursts are pure colour transitions — reach for a CSS gradient. Anything that is a recognisable motif (dot with a specific dot, leaf, plus, logo) needs real vector markup, which means SVG
<pattern>. - Step 2For stripes or checks, try repeating-linear-gradient first —
repeating-linear-gradient(45deg, #eee 0 10px, #fff 10px 20px)gives diagonal stripes with zero assets. Layer two at 90 degrees to each other for a grid/check. No SVG, no data URI, infinitely scalable. - Step 3For wedges or starbursts, use conic-gradient —
conic-gradientsweeps colour around a centre, so it produces pie slices and sunbursts. It repeats angularly, not on a grid — good for a single radial motif, not for a tiled field of icons. - Step 4For a real motif, build the SVG <pattern> — Upload your motif to the JAD pattern tiler. It strips the outer
<svg>, wraps the inner shapes in auserSpaceOnUse<pattern>whose cell istileSize + spacing, and paints it across a 300x300 rect. Set tile size, spacing, rotation, and a background. - Step 5Choose inline SVG or CSS data URI for delivery — Paste the generated
<pattern>SVG inline for full control, or run it through the CSS data-URI tool to get abackground-image: url(...)you can attach to any element — a pure-CSS repeat that still draws your motif. - Step 6Measure and ship the smallest option that works — Compare byte cost: a gradient is a few dozen CSS characters; a data-URI SVG motif is hundreds to a few thousand bytes. Use the cheapest technique that actually renders your pattern, and keep the motif simple to keep the URI short.
The four repeating-pattern techniques compared
What each technique can express, what it costs, and where the JAD pattern tiler sits. 'Arbitrary motif' means you can draw any shape, not just colour bands.
| Technique | Can draw | Asset? | Scales cleanly | Built by this tool? |
|---|---|---|---|---|
SVG <pattern> (inline) | Any vector motif | Vector markup in the document | Yes (vector) | Yes — this is exactly what it outputs |
| Repeating SVG data URI in CSS | Any vector motif | Encoded SVG in a CSS string | Yes (vector) | Indirectly — export here, then svg-css-data-uri |
repeating-linear-gradient | Stripes, checks, grids | None (pure CSS) | Yes | No — pure CSS, no tool needed |
conic-gradient | Wedges, starbursts, pie repeats | None (pure CSS) | Yes | No — pure CSS, no tool needed |
Pick by what you are drawing
Match the pattern you want to the cheapest technique that can express it.
| You want... | Best technique | Why |
|---|---|---|
| Diagonal stripes | repeating-linear-gradient | Pure colour bands — no asset, smallest byte cost |
| A checkerboard / grid | Two layered repeating-linear-gradients | Two crossed stripe sets; still zero assets |
| A sunburst / pie repeat | conic-gradient | Angular repeat around a centre point |
| A field of custom dots or icons | SVG <pattern> (this tool) | Gradients cannot draw a specific shape; needs real vector markup |
| A tiled logo glyph background | SVG <pattern> -> data URI | Build the pattern here, deliver as a CSS background-image |
Cookbook
Side-by-side: the same visual goal expressed in the right technique. The SVG <pattern> snippets match what the JAD tiler writes.
Stripes: gradient beats SVG every time
A two-colour diagonal stripe is pure colour transition. A gradient does it in a few dozen characters; an SVG asset here would be wasteful.
CSS (recommended): background: repeating-linear-gradient( 45deg, #eef2ff 0 12px, #ffffff 12px 24px); SVG <pattern> equivalent (overkill for stripes): <pattern id="s" width="24" height="24" patternUnits="userSpaceOnUse"> <rect width="24" height="24" fill="#fff"/> <rect width="12" height="24" fill="#eef2ff"/> </pattern>
Custom dot field: gradient can't, SVG <pattern> can
A grid of specific dots (precise radius, precise colour) is a shape, not a band. This is the SVG <pattern> sweet spot and exactly what the tiler builds.
Motif (dot.svg) -> JAD pattern tiler, Tile size 40, Spacing 20:
<pattern id="tile-dot" width="60" height="60"
patternUnits="userSpaceOnUse">
<rect width="60" height="60" fill="transparent"/>
<g><circle cx="10" cy="10" r="4" fill="#6366f1"/></g>
</pattern>
<rect width="100%" height="100%" fill="url(#tile-dot)"/>From SVG <pattern> to a CSS background-image
Once you have the tiler's output, convert it to a data URI for a pure-CSS repeat that still draws a real motif.
1. Build the <pattern> SVG in the JAD pattern tiler.
2. Run that SVG through /svg-tools/svg-css-data-uri.
3. Use the result:
.surface {
background-image: url("data:image/svg+xml,...encoded...");
}
# Tiles via the SVG's own <pattern>; CSS just places it.Sunburst: conic-gradient, not a tile
A radial wedge repeat is angular, not grid-based. conic-gradient nails it with no asset; tiling it as an SVG motif would fight the technique.
background: conic-gradient( #f1f5f9 0deg 15deg, #ffffff 15deg 30deg); # 24 wedges around the centre. Note: repeats by ANGLE, # so it does not tile across a grid like SVG <pattern> does.
When to keep it inline vs data URI
Inline SVG gives you DOM access (animate, restyle); a data URI is a single CSS line but opaque to the DOM. Pick by whether you need to touch the motif later.
Inline: full DOM control, can animate the motif, more markup Data URI: one CSS declaration, cacheable, but motif is frozen Rule of thumb: dynamic/interactive -> inline; static decorative surface -> data URI.
Edge cases and what actually happens
Trying to draw a logo with gradients
Not possibleGradients only interpolate colour between stops — they cannot render an arbitrary shape. Any recognisable motif (logo, leaf, icon) requires SVG <pattern>. Build it with this tool instead.
conic-gradient expected to tile on a grid
By designconic-gradient repeats angularly around a centre, not across X/Y cells. It makes wedges and starbursts, never a tiled motif field. Use SVG <pattern> for grid tiling.
Data URI bloats with a complex motif
Watch outEncoding a detailed motif as a CSS data URI can run to several KB and hurts readability. Keep the motif simple, or keep complex patterns inline. The tiler's output is minimal but your motif's complexity dominates.
Gradient stripes look blurry at edges
ExpectedBrowsers anti-alias gradient stops. For razor-sharp stripe edges, use hard stops (same offset twice, e.g. 0 12px, 12px ...) — that is a CSS-side fix, unrelated to SVG.
Mixing patternUnits incorrectly
Watch outThe tiler uses patternUnits="userSpaceOnUse", so cell dimensions are absolute user units. If you hand-edit it to objectBoundingBox, the same numbers mean fractions of the painted element and your tile will collapse.
Pattern shows nothing behind transparent background
SupportedWith a transparent background the pattern overlays whatever is beneath it. That is correct for overlays; set an opaque background colour if you want a self-contained surface.
Two data-URI patterns with the same id
Watch outIf you inline two tiler outputs from same-named files, both carry id="tile-<stem>"; the second collides with the first. Rename a source file or edit the id before embedding.
Expecting brick/half-drop offset
Not supportedNeither the tiler nor a plain <pattern> offsets alternating rows for you. Bake the offset into the motif, or use a gradient technique if the pattern is band-based.
Frequently asked questions
When should I use a CSS gradient instead of SVG?
Whenever the pattern is purely stripes, checks, grids, or wedges. Gradients ship zero assets and the fewest bytes. Switch to SVG <pattern> only when you need an actual shape.
When is SVG <pattern> the only option?
When the pattern is a recognisable motif — a custom dot, a leaf, a logo glyph, an icon. Gradients interpolate colour and cannot draw shapes, so a motif field requires vector markup.
What does the JAD pattern tiler build?
It builds the inline SVG <pattern> option: it wraps your motif in a userSpaceOnUse pattern (cell = tileSize + spacing) and paints it across a 300x300 canvas. You can then convert that to a CSS data URI.
Can I turn the tiler's output into a CSS background?
Yes — run the exported SVG through the CSS data-URI tool (or base64 encoder) and use it as background-image. The tiler itself outputs SVG, not a data URI.
Does repeating-linear-gradient scale without blur?
Yes — gradients are resolution-independent. Edges anti-alias by default; use doubled hard stops (0 12px, 12px 24px) for crisp stripe boundaries.
Why does my conic-gradient not tile like a grid?
conic-gradient repeats around a centre angle, producing wedges and starbursts. It is angular, not grid-based. For X/Y tiling of a motif, use SVG <pattern>.
Is inline SVG or a data URI better?
Inline keeps the motif in the DOM so you can animate or restyle it. A data URI is one CSS line and cacheable but opaque. Choose inline for dynamic patterns, data URI for static surfaces.
Which technique is smallest in bytes?
CSS gradients, by far — a few dozen characters. A data-URI SVG motif is hundreds to a few thousand bytes depending on motif complexity. Inline SVG adds the same markup to your HTML.
Can gradients make a checkerboard?
Yes — layer two repeating-linear-gradients at 90 degrees with transparency, or use a single gradient at 45 degrees for diagonal checks. Still zero assets, no SVG needed.
Does the tiler recolour my motif for theming?
No. Colours come from your motif. For themeable patterns, recolour the motif first with the hex swapper or map it to currentColor via the Tailwind tool, then tile it.
Can I animate an SVG pattern?
If you keep it inline and your motif contains animation markup, yes — patterns can render <animate>. A data-URI pattern is static. Browser support for animated patterns varies, so test.
What about generated decorative shapes?
For generated motifs that you then tile, see the blob generator, low-poly generator, and wave divider — build the shape, then feed it to the tiler.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.