Pop-Art Backgrounds with SVG and Blend Modes

In the previous article I introduced using SVG in a tiled background images for web pages. Those simple stripes and lines can be expanded to more complex shapes, mixed with blend modes and bitmap images to create layered “pop art” backgrounds. These techniques allow for richer visual effects with easier code and more flexibility than my previous attempt using CSS gradients.

Checkerboard

Creating an SVG checkboard is a matter of using just two square elements in a diagonal arrangement:

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">

<g fill="#ccc">

<rect width="25" height="25" />

<rect x="25" y="25" width="25" height="25" />

</g>

</svg>

This creates a pattern like so:

Layered with a bitmap image:

section#grid {

background-image: 

url(checkerboard.svg),

url(grace-kelly.jpg);

background-size: 100px 100px, cover;

background-blend-mode: overlay;

}

… creates the first effect shown above. The bitmap image is sized to cover the area of the element; the checkerboard pattern repeats every 100 pixels, both horizontally and vertically. But rather than simply layering over the image, it blends with it in overlay mode.

Polka Dots

A similar idea can be used to pattern images with polka dots, using five SVG circles: one in the exact center of the SVG viewBox, and the remaining four with their centers at each corner:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">

<style type="text/css">

circle { fill: #f99; }

</style>

<circle cx="0" cy="0" r="100"/>

<circle cx="300" cy="0" r="100"/>

<circle cx="0" cy="300" r="100" />

<circle cx="300" cy="300" r="100"/>

<circle cx="150" cy="150" r="100"/>

</svg>

Which creates this pattern:

This code is saved as circle-grid.svg and layered with a bitmap image in the background of an element:

section#circles {

background-image:

 url(kelly-brook-as-gilda.jpg),

 url(circle-grid.svg);

background-size: cover, 100px 100px;

background-blend-mode: multiply;

}

Conclusion

This should give you some idea as to how to proceed with your own ideas; there are many more possibilities for these kinds of designs, which I’ll explore in future articles. Inspect the code for this demo on CodePen