How to svg patterns vs css repeating patterns: which to use?
- Step 1Identify your pattern type — Stripes, dots, or checkers: CSS repeating-linear-gradient or repeating-conic-gradient — no SVG needed. Custom icon or complex shape: SVG pattern or data URL. Very fine grid or halftone: SVG pattern (cleaner than gradient).
- Step 2Choose the implementation — For CSS-only patterns, use MDN's gradient pattern library as a starting point. For SVG-based patterns, use the JAD Pattern Tiler to generate the pattern element and CSS background-image declaration.
- Step 3Measure the data URI size — Inline SVG patterns as data URIs should be under 1KB for good performance. Larger patterns (complex icon motifs) should be served as external SVG files with the pattern element defined in a separate sprite or the HTML head.
Frequently asked questions
What is the most performant way to create a dot pattern background?+
CSS radial-gradient: background: radial-gradient(circle, #555 1px, transparent 1px); background-size: 20px 20px. This generates the pattern entirely on the GPU without any SVG parsing and zero HTTP requests. It's the fastest possible implementation for simple geometric patterns.
Can I create a pattern that changes colour in dark mode?+
Yes, with an inline SVG that uses a CSS custom property for the motif fill colour: fill: var(--pattern-colour, #000). Set the custom property in your CSS: :root { --pattern-colour: #000; } and [data-theme='dark'] { --pattern-colour: #fff; }. The pattern adapts to theme changes without regenerating the SVG.
How do I create a staggered (brick) pattern offset between rows?+
Create a tile that is twice the height of one row. Place two motifs in the tile, with the second motif offset by half the tile width horizontally. When tiled, this creates the brick/offset grid effect. The JAD Pattern Tiler has a stagger option that computes this automatically.
Is there a performance difference between an external SVG pattern file and a data URI?+
External SVG files are separately cacheable by the browser — they load once and are reused on any page. Data URIs are embedded in the CSS file — they add to CSS parse time but eliminate an HTTP request. For small patterns (under 500 bytes), data URIs are faster on first load. For larger patterns, external files win after the first cached load.
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.