SVG Pattern Generator Guide: Seamless Background Patterns for Web

Why SVG Patterns Over Raster Images

A subtle background texture that would take 200KB as a JPEG:

• Pixelates on high-DPI (Retina) screens
• Requires an HTTP request or Base64 bloat
• Cannot be dynamically colored with CSS variables

The same texture as an SVG pattern:

• ~500 bytes to 2KB of inline SVG or CSS
• Scales infinitely — sharp on any screen density
• Colors can be CSS variables, changeable at runtime
• Rendered by the GPU with hardware acceleration

For web performance, SVG patterns are strictly superior for any geometric or mathematical texture.

How SVG <pattern> Works

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="2" fill="#3b82f6" opacity="0.3"/>
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#dots)"/>
</svg>

The <pattern> element defines a tile — width and height set the tile size. The patternUnits="userSpaceOnUse" means dimensions are in absolute pixels. The tile repeats seamlessly to fill any space.

Common Pattern Types

Dot grid

<pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="1.5" fill="#94a3b8"/>
</pattern>

Subtle dot grids are widely used in dashboard and data visualization interfaces to suggest structure without adding visual weight.

Line grid (graph paper)

<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#e2e8f0" stroke-width="1"/>
</pattern>

Diagonal lines (hatching)

<pattern id="hatch" width="8" height="8" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
    <line x1="0" y1="0" x2="0" y2="8" stroke="#94a3b8" stroke-width="1"/>
</pattern>

The patternTransform="rotate(45 0 0)" rotates the tile while keeping the coordinate system consistent.

Checkerboard

<pattern id="checker" width="20" height="20" patternUnits="userSpaceOnUse">
    <rect width="10" height="10" fill="#f1f5f9"/>
    <rect x="10" y="10" width="10" height="10" fill="#f1f5f9"/>
</pattern>

Hexagon grid

<pattern id="hex" width="28" height="48.5" patternUnits="userSpaceOnUse">
    <polygon points="14,0 28,8 28,24 14,32 0,24 0,8" fill="none" stroke="#e2e8f0"/>
    <polygon points="14,32 28,40 28,56 14,64 0,56 0,40" fill="none" stroke="#e2e8f0" transform="translate(-14,24)"/>
</pattern>

Embedding in CSS

As a CSS Data URI

.hero {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='d' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%2394a3b8'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23d)'/%3E%3C/svg%3E");
}

The SVG is URL-encoded (spaces become %20, # becomes %23, ' becomes %27, <> become %3C%3E). Use our URL Encoder for encoding and our Base64 Encoder if you prefer Base64 data URIs.

As an inline SVG background

.hero {
    background-image: url("data:image/svg+xml,<svg ...>...</svg>");
    background-repeat: repeat;
    background-size: 20px 20px; /* Matches pattern tile size */
}

As a standalone SVG file

.hero {
    background-image: url("/patterns/dots.svg");
    background-repeat: repeat;
}

Standalone files are cacheable — better for patterns used across many pages.

Combining with Gradients and Glass

Layer patterns with other background effects:

.hero {
    background:
        /* Pattern on top */
        url("data:image/svg+xml,...") center / 20px 20px,
        /* Gradient below */
        linear-gradient(135deg, #1e1b4b, #312e81);
}

Layer over glassmorphism from our Glass & Neumorphism Generator by applying the pattern with low opacity to the glass card's background or a pseudo-element.

Opacity and Micro-Texture

The key to professional pattern use is restraint. Patterns at full opacity compete with content. Patterns at 5–15% opacity add subtle texture that enriches the layout without distracting:

.bg-pattern {
    position: relative;
}

.bg-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,...");
    opacity: 0.07; /* Micro-texture at 7% */
    pointer-events: none;
}

Always verify text readability over patterns with our Contrast Checker. Use our CSS Formatter to organize pattern declarations alongside your other background CSS, and our Gradient Generator to build the gradient layer that goes beneath.