Websites to Generate SVG Patterns

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

These aren’t particularly hard to web search for, but just in case you didn’t know they existed I figured I’d drop them here. I’ve used all three of these in the past and I think they do a good job of driving home how cool of patterns you can make in SVG with such little code.

SVG Backgrounds

Customizable SVG patterns and background designs for websites and blogs

Hero Patterns

A collection of repeatable SVG background patterns for you to use on your web projects.

SVG Patterns Gallery

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


Original link is dead (conversation), and a temporary(?) version is up at this link.

Scalable Vector Graphics are crisp and clear and can be rendered in all modern browsers.


Totally awesome, well-stretched svg backgrounds, free for download.

You can customize them with things like colors and scale, which is a great touch: