How to Create a Seamless SVG Pattern Background

Repeating background patterns—whether they are subtle dots, geometric grids, or complex illustrations—are a staple of great web design. Historically, developers created these backgrounds by tiling small PNG or JPG image files using CSS. The problem? Raster images are heavy, and they look blurry on high-resolution Retina displays.

The modern solution is to use the SVG <pattern> element. SVG patterns are mathematically drawn, meaning they look perfectly crisp on every device, require zero HTTP requests if embedded inline, and often weigh less than 1KB. In this tutorial, we will walk through exactly how to write and implement a seamless SVG pattern from scratch.

Step 1: Understanding the SVG Defs and Pattern Tags

Unlike a standard SVG shape that simply draws itself on the canvas, a pattern must be defined before it can be used. We do this by wrapping our pattern code inside a <defs> (definitions) block. Nothing inside a <defs> tag is visible on the screen until it is explicitly called by another shape.

Let's break down the <pattern> tag attributes:

• id: This is the unique name we give the pattern (e.g., "polka-dots"). We use this ID later to apply the pattern as a fill.
• width & height: This defines the size of the "tile" that will be repeated. In this example, our repeating tile is a 20x20 pixel square.
• patternUnits="userSpaceOnUse": This crucial attribute tells the browser to size the pattern based on absolute coordinates rather than percentages of the bounding box. This prevents the pattern from squishing or stretching when the browser window resizes.

Step 2: Drawing Inside the Pattern Tile

Now that we have defined a 20x20 pixel tile, we can draw shapes inside it. Anything we draw inside this tile will be infinitely repeated across the background.

Let's draw a simple circle in the center of our tile. Since the tile is 20x20, the center coordinate is 10 for both X and Y.

When applied to a full-screen rectangle, this code will instantly generate an infinite, seamless polka-dot background.

Step 3: Creating a Complex Seamless Grid

Polka dots are easy because the shape sits perfectly in the center of the tile. But what if you want a pattern that connects across the edges of the tiles, like a grid or a woven texture?

To create a seamless grid, you draw lines along the exact edges of your tile.

In this code, we have a 40x40 tile. The <path> element draws a 1-pixel gray line along the top edge and the left edge of the tile. When the browser tiles this 40x40 square infinitely, the top and left lines connect perfectly to form a beautiful, continuous architectural grid.

Step 4: Using the SVG Pattern as a CSS Background

While embedding the SVG inline is great, sometimes you want to use your new pattern as a CSS background-image for a specific div. You can easily convert your SVG code into a Data URI and paste it directly into your stylesheet.

Note: When placing SVG code directly into CSS, you must URL-encode characters like the hash symbol (# becomes %23) to ensure it renders correctly across all browsers.

Conclusion

Mastering the SVG <pattern> element unlocks a world of creative possibilities for web design. By defining a small, repeating tile within a <defs> block, you can generate infinitely scalable backgrounds that look stunning on 4K monitors while weighing just a fraction of a kilobyte.

Whether you are building a subtle dotted background for a SaaS landing page or a complex geometric grid, native SVG patterns offer the perfect blend of performance and visual quality.