SVG is incredibly useful for making web page backgrounds: everything from simple stripes to bokeh and pop art. This reading list addresses all of these creative possibilities and more, complete with code samples, Codepen repos and design guides.

1. Stripes
2. Diagonals & Patterns
3. CrossHatching, Grids & Checkerboards
4. Hexagons & Scales
5. Escher Tiles
6. Text Watermarks
7. Bokeh
8. Ruled Paper & Lined Text
9. Pop-Art Backgrounds
10. Halftone Effect
11. SVG Movie Backgrounds
12. Dynamic SVG Background Pattern Maker
13. Blurry Background Maker
14. Recursive SVG
15. Recursive SVG Background

Cultural

I’ve also started a series on creating iconic cultural designs using SVG, for use in backgrounds and borders. Appropriately, many of these articles are also offered in other languages: see the translation links at the top of each piece.

1. Japan
2. Africa
3. Greek
4. Maori

Photograph by Royce Bair, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.