The present article offers a brief introduction to vectors, and catalogs seven of the many excellent, free resources out there for creating perfect vector patterns. How you use these SVG pattern generators is up to you.
Bump Set Creative designer Matt Lipman has a complete SVG background generator tool free to use with attribution, or without attribution by purchasing a license. Customize one of the 95 backgrounds, then export as CSS code to insert into your website’s stylesheet. Lipman is adding new backgrounds every week until the collection contains 200 options, so this is a great source for fresh patterns. He includes useful tips on how to properly provide attribution for your background.
What if you just want something simple, like stripes? Coffee Break Designs created an SVG Stripe Generator that offers controls on line thickness, spacing, direction, and color. Do you want a bold pattern or something subtle?
Customize stripes with your branding colors using the hex code, or just play around. What do stripes say to you? Stripes are an invigorating and clean background for a restaurant menu or recipe page. They can be friendly and sophisticated at the same time.
How about plaid? You can go a little country, cute, or vintage, depending on your color and scale preferences. Plaid has been associated with hipsters, grunge, and lumberjacks over the decades, but it’s just as ubiquitous in bedsheets and baby clothes. The truth is that plaid, properly called “tartan,” has been around for thousands of years and it isn’t leaving the scene any time soon.
The humorously titled SVGeez site, built by designer Megan Young, offers classic patterns alongside some truly kitschy options. All are customizable and free for download. If you’ve ever needed a Bigfoot pattern, now you’ve got it. Or, hey, how about a “hot wing time machine” theme?
You may not use something like this for your own project, but SVGs like these can act as an inspirational launchpad when you’re creating a web design that needs a little extra kick. Background image CSS can be just the twist you need without sacrificing readability or white space in your prime real estate.
Along these same lines, User Interface designer Steve Schroger cooked up a full menu of standard patterns as well as a few funkier options. Customize and download code for free under the Creative Commons 4.0 attribution license, the same license in effect for many of these sites.
Finally, Kenneth Cachia has a pattern tool similar to the operation used in Adobe Illustrator to create a repeat pattern. Cachia has a list of features in the works to be added to this currently under-development tool.
I saved this one for last because it takes us back to the issue of creating your own vector drawings to create repeat patterns. Here, you can upload your own SVG elements to produce a pattern perfect for textiles or custom backgrounds. Experiment with some of the charming icon presets to get the feel of the interface, and download the result as an image file.
If you’ve never attempted to make a repeat pattern using multiple design elements, my advice is to take a look around at textiles, wallpapers, or packaging you like and dissect how their patterns are put together. Look at the frequency of the repetition, scale, color, and rotation of individual elements in the pattern, and see if you can replicate it with your own original vector drawings or icons.