A series of serendipitous connections started me thinking about using tiled SVG elements for background images, especially patterns inspired by movies.

SVG is uniquely suited for this, being infinitely scalable and (when correctly written) very small and fast to load. This article will introduce the code for the patterns; in the next, I’ll talk about techniques you can use to make your own SVG background images.

To Infinity, and Beyond

The first is the wallpaper pattern from Andy Davis’s room in Toy Story. In this version I’ve kept the shading and code to a minimum:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 413 254.2">
    <path fill="#FFF" d="M6,239.9c18.7,0,184.7,0.7,204.7,0s13.3-18.7-17.3-19.3c31.3-14.7,28.7-79.3-8.7-64.7 c8.7-79-128.7-76-93.8,24.7c-12.2,0-39.5,15.3-31.5,38.7c-17.3,2.7-30,2.4-42.8,6.2C1.9,229.7,6,239.9,6,239.9z"/>
    <path fill="#FFF" d="M310.7,97.4c0,0,60.1,0.2,80.1,0c20.5-0.2,22.9-10.6,2.9-14.8C418.2,46.8,356,4.1,344.5,59
c-16.8-8.3-30.3,16.6-28.8,26c-6.7-0.5,0-1.3-9.3-0.5C297,85.3,289.4,97.8,310.7,97.4z"/>
</svg>

The SVG consists of two cloud-paths, drawn in Adobe Illustrator; the background has been left clear for maximum adaptability. Saved as andy-clouds.svg, the file can be used like this:

body {
	background-image: url(andy-cloud.svg), linear-gradient(#00f,#33f);
    background-repeat: repeat, no-repeat;
    background-size: 200px 100px, cover;
}

Note that background-size determines the tiling of the cloud patterns, and that it roughly matches the aspect ratio of the SVG viewport.

All Work and No Play

The next version is a little more complex, as it’s a continuous pattern from edge to edge that must tile seamlessly across the element it is applied to. In Illustrator, the drawing appears like the image in Figure 1; again, the background has been left clear and the code minimized as much as possible:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340.6 491.8">
    <polygon fill="#8C1A1E" points="229.9,208.7 170.5,243 111,208.7 111,140 170.5,105.7 229.9,140 "/>
    <polygon fill="#8C1A1E" points="0,305.3 59.5,339.6 59.5,408.3 0,442.6 "/>
    <polygon fill="#8C1A1E" points="342.8,442.6 283.3,408.3 283.3,339.6 342.8,305.3 "/>
    <polygon fill="#D05427" points="91.6,0 0,52.9 0,0 "/>
    <polygon fill="#D05427" points="340.6,0 340.6,52.9 248.8,0 "/>
    <polygon fill="#D05427" points="21.4,264.6 102.8,311.6 102.8,431.7 -1.2,491.8 0,544.5 149.7,458.1 149.1,285.1 68.2,236.7 
68.2,116.6 172.2,56.5 276.2,116.6 276.2,236.7 192.5,285 192.5,337.1 192.5,337.1 192.5,458.1 342.2,544.5 341,491.8 237,431.7 237,311.6 320.8,263.3 320.8,90.2 171.1,3.8 21.4,90.2 "/>
</svg>

Applying the pattern is also slightly more complex: the background-size of the applied image must match the aspect ratio of the SVG viewport exactly to create a seamless tile.

body {
    background-color: #000;
    background-image: url(overlook-carpet.svg);
    background-size: 169px 244px;
}

While the SVG file is tiny (just 844 bytes before GZipping), what kills page loading time in many cases is not file size, but latency: the time taken to establish a new connection in order to download another file. To avoid that extra HTTP request, the SVG could be base-64 encoded or inlined. If inlined, the code would look like this:

body {
    background-color: #000;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340.6 491.8"><polygon fill="#8C1A1E" points="229.9,208.7 170.5,243 111,208.7 111,140 170.5,105.7 229.9,140 "/> ... </svg>');
    background-size: 169px 244px;
}

Of course, that has the downside of increasing the size of the CSS file; ultimately, the best course of action will depend on several factors, including just how the SVG background will be used.

It’s also useful to note that changing the background-size of the image will change the tiling, sometimes in dramatic ways; for example, using background-size: 400px 244px will produce a result that looks like Figure 2:

There’s much more that can be done here, including the possibilities of animating the background images. In the meantime, I’d like to ask: what iconic textures from movies would you like to see as SVG backgrounds? Please leave your suggestions in the comments section below!

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/jEJGqZ