SVG Patterns Gallery

• Click or Touch to test
• Inspired by Lea's CSS3 Patterns Gallery
• Why SVG?
• Browser support
• Github repo
• Enjoy!

• Try this

  Horizontal stripes

  Get the code

• Try this

  Green stripes

  Get the code

• Try this

  Honeycomb

  Get the code

• Try this

  Chevrons

  Get the code

• Try this

  Carbon fiber

  Get the code

• Try this

  Microbial mat

  Get the code

• Try this

  Dance

  Get the code

• Try this

  Checkerboard

  Get the code

• Try this

  Waves

  Get the code

• Try this

  Vertical stripes

  Get the code

• Try this

  Shippo

  Get the code

• Try this

  Half-rombes

  Get the code

• Try this

  Transparent

  Get the code

• Try this

  Simple horizontal

  Get the code

• Try this

  White carbon

  Get the code

• Try this

  Cross stripes

  Get the code

• Try this

  Subtle dots

  Get the code

• Try this

  Thin stripes

  Get the code

• Try this

  Speckled noise

  Get the code

• Try this

  Blueprint grid

  Get the code

• Try this

  Argyle

  Get the code

Why SVG?

SVG images are typically smaller than bitmap images and remain sharp on high-dpi screens. Unlike CSS3 gradients, SVG images are supported on IE9.

Browser support

These patterns work on Firefox, Chrome, Safari, Edge, IE10, and IE9. Base64 encoding is required for IE and Firefox.