A pattern of wind-rippled sand

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


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.