Design & UX
Article
By Alex Walker

6 Clever SVG Pattern Generators for Your Next Design

By Alex Walker
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

Today I want to touch on SVG Patterns. They’re not widely understood, but offer a lot of really interesting design options once you get your head around them. I’m going to start with a crash course on how SVG patterns work. Then we’ll spin through 6 tools that take advantage of them.

In theory, combining the output from these tools and what you know about patterns should open up some seriously interesting new design possibilities. Let’s go.

How do SVG Patterns Work?

Patterns have always been a super common web design element. Even if you only know a little CSS, you probably understand how easy it is to set up any image as a CSS tiling background.

div {
    background-image: url("sitepoint-tile.svg");
  }

Of course, we could use any web image format we like for that background (JPG, PNG, etc). But as SVGs are so efficient, sharp and very scalable, there are excellent reasons for choosing to use an SVG for your CSS background tiles.

However, you may be less familiar with SVG’s native way to make repeating backgrounds – SVG patterns. It is interesting because it has some special powers that regular CSS tiling can’t offer. But first, let’s look at how a simple SVG pattern works first.

<svg>
  <defs>
  <pattern id="myPattern"
           x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" >
<!-- start pattern-->
      <circle cx="10" cy="10" r="7" style="stroke: none; fill: magenta" />
<!-- end pattern -->
  </pattern>
</defs>
...

In the top of most SVG files you’ll find a <DEFS> code block. The <DEFS> section (or DEFinitions) is where we place item we want to re-use later. In practice, this means SVG FILTERs, SYMBOLs and PATTERNs.

Simple Pattern

Simple SVG patterns – (Or as a codepen example)

Inside our <DEFS> block, we’ve set up a 20 x 20px area of pattern. Then we’ve positioned a small magenta circle right in the center (cx=”10″ cy=”10″) of that space (though this could have been anything we wanted to tile).

But this doesn’t render anywhere – yet. It is just a pattern definition – almost like a color swatch or a CSS class. You have to call it in an SVG FILL to use it.

...
<circle cx="50" cy="50" r="50" style="stroke: #ccc; fill: url(#myPattern);" />
</svg>

Here we’re creating a large circle (radius 50px) and filling it by referencing the pattern we defined above. It renders like this.

(Or as a codepen example)

Pretty simple, right? And we could scale up that container circle as large as we liked with no increase to the file size whatsoever.

So, are SVG Patterns more useful than CSS tiles?

They certainly can be.

1. SVG allows you reference one pattern from within another pattern

Moire Pattern

This allows you build-up complex, layered patterns from very simple components. For instance, how would you produce this Moiré pattern with a standard CSS tile?

SVG allows us to define a ‘base pattern’ – like the dots we created above – and then layer that pattern with different color fills, rotations and scale (like above). Tiny files, but crazy complexities.

2. SVG patterns aren’t limited to rectangular repetitions.

While CSS tiling backgrounds are always rectangles, SVG is a language of mathematics and geometry, designed to tile (or tesselate) in triangles, hexagons and even ‘Escher-esque’ multi-shape combinations.

Tesselation

Tesselation

Hexagon-based tesselations.
Source: Mathstat.slu.edu

M.C. Escher’s famous Lizard tessellation is a famous example based on a hexagonal tile – this would be tough to do with rectangular tiles. In short, SVG patterns offer all sort of interesting design possibilities if you’re ready to experiment.

I think these are two characteristics that open up lots of design possibilities – once you get a feel for the basics.

But for today, I thought we’d look at some of the ready-to-use ‘off-the-rack’ options out there. Take these as they are, or else use them as a jumping off point for more interesting creations.

1. Hero Patterns

Hero Patterns

Hero Patterns, a project by UI designer and illustrator Steve Schoger, is a good place to start.

Steve currently offers over 90 SVG patterns for free download and allows you to set the opacity, foreground and background colors of your file.

Interestingly, the samples here are not just a bunch square tiles either, which makes it a good place to get an understanding of what you can do with SVG patterns.

2. Iros Pattern Fills

Fill Patterns

In a lot of early 20th century maps and charts, you’ll see they often make up for a lack of color by using monotone pattern fills with dots, lines, and cross-hashes. Although this was a design limitation of the time, today it still presents a crisp, super-efficient option for your SVG fills.

Iros has collected a pattern book of monotone pattern fills that you can reference in your work easily. These are tiny files and you can probably afford to include them all, even if you only reference a few.

Iros Patterns

3. Trianglify Generator

Trianglify Generator

To be clear, Trianglify Generator doesn’t use the SVG pattern element, but I feel it sits comfortably amongst this set of tools.

This is a tool that generates one very specific type of background SVG – a colored, faceted triangular matrix – almost like a low-polygon surface. You can control the color, size, and randomness of the underlying grid.

Though these backgrounds certainly have limited use cases, they offer a vibrant, semi-organic design element that can scale crisply to cover huge areas while remaining a tiny file size.

--ADVERTISEMENT--

4. Flaticon Patterns

Flaticon pattern

Flaticon are well known for their extensive library of downloadable icons, but they also have a nice tool that can turn the icons into a wrapping paper-like seamless tile.

It’s easy to use. Click on icons from the library to add them to your workspace. Click on an icon to select it and adjust the circular control to scale, position and rotate each icon. When you’re done you can down your pattern as SVG, or, if you prefer, PNG, JPG, and even Base64 encoded.

Be aware that the Flaticon icons used here are quite rich and detailed (read: large files), so loading lots of them into your pattern design can still really blow your file size out.

SVG Patterns Gallery

Philip Rogers has been maintaining a pretty cool collection of downloadable SVG patterns. It’s not a huge collection – 21 patterns – but Phil has made it easy to test and grab the code.

6. Geopattern

GeoPattern

This is an interesting experiment in generated patterns. Whatever you type into the text field is used as ‘seed’ to generate a unique pattern. In other words, it’s not random – type the same thing and you’ll get the same pattern each time.

To be honest, it’s probably more of a curiosity than a production-ready tool in its current form. Although it works in SVG behind the scenes, it only lets you download PNG copies of your image – which makes it less useful in my view.

Nevertheless, I think it shows what you can do by taking a geometric approach to image generation. These images aren’t so much consciously designed as ‘unearthed in a mining operation’.

Wrapping up

Great SVG patterns are a perfect blend of design inspiration and technical know-how and good tools certainly help.

If you’re interested in experimenting with SVG patterns, I wrote a piece last year on using Boxy SVG to create SVG patterns from scratch. Playing with that tool taught me a lot of what I know about patterns now.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?