www.sitepoint.com Open in urlscan Pro
2600:9000:2250:6800:10:7abf:f800:93a1  Public Scan

Form analysis
2 forms found in the DOM

<form class="relative flex bg-transparent text-white lg:text-primary-900 m-0 z-50"><input type=" text"
    class="bg-gray-500 lg:bg-transparent border rounded-sm border-gray-400 focus:border-primary-400 px-2.5 py-1.5 lg:py-1 m-1 w-full text-sm focus:outline-none " placeholder="Search articles..." aria-label="Search articles" value="" maxlength="100">
</form>

<form class="relative flex bg-transparent text-white lg:text-primary-900 m-0 z-50"><input type=" text"
    class="bg-gray-500 lg:bg-transparent border rounded-sm border-gray-400 focus:border-primary-400 px-2.5 py-1.5 lg:py-1 m-1 w-full text-sm focus:outline-none " placeholder="Search articles..." aria-label="Search articles" value="" maxlength="100">
</form>

Text Content

WE VALUE YOUR PRIVACY

We and our partners store and/or access information on a device, such as cookies
and process personal data, such as unique identifiers and standard information
sent by a device for personalised ads and content, ad and content measurement,
and audience insights, as well as to develop and improve products.With your
permission we and our partners may use precise geolocation data and
identification through device scanning. You may click to consent to our and our
partners’ processing as described above. Alternatively you may click to refuse
to consent or access more detailed information and change your preferences
before consenting.Please note that some processing of your personal data may not
require your consent, but you have a right to object to such processing. Your
preferences will apply to this website only. You can change your preferences at
any time by returning to this site or visit our privacy policy.
MORE OPTIONS DISAGREE AGREE
🔥 50% Off Sale 600+ Tech Courses and Books
23:59:55
Claim Now
SitePoint

 * Hmm... Couldn’t find any articles containing:
   
   ¯\_(ツ)_/¯
 * Blog
 * * JavaScript
   * Computing
   * Design & UX
   * HTML & CSS
   * Entrepreneur
   * Web
   * PHP
   * WordPress
   * Mobile
 * Discord
 * Forum
 * Library
 * Login
 * Join Premium

Join Premium

Hmm... Couldn’t find any articles containing:

¯\_(ツ)_/¯

 * JavaScript
 * Computing
 * Design & UX
 * HTML & CSS
 * Entrepreneur
 * Web
 * PHP
 * WordPress
 * Mobile

Design & UX


6 CLEVER SVG PATTERN GENERATORS FOR YOUR NEXT UX DESIGN

Canvas & SVG
Design
HTML
HTML & CSS
Illustration
Sketch

Alex WalkerJune 6, 2022
Share

SVG patterns could easily be thought of as an under-appreciated superpower of
SVG. While they’re often not widely understood, SVG patterns offer a lot of
interesting design options once you understand their subtleties.

In this article, we’re 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 with what you know about
patterns should open up some exciting, new design possibilities.


HOW DO SVG PATTERNS WORK?

Repeating patterns have been a mainstay of web design from the earliest days of
Geocities and MySpace ruled the prehistoric internet. 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 scalable that 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 method to make repeating
backgrounds – SVG patterns. It is relevant to us because it offers special
powers that regular CSS tiling can’t. 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>
...

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

Simple SVG patterns


THE SVG PATTERN MARKUP

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 any item that 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’ll need to reference it in one of your
SVG FILLs to see it render.

...
<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.





That’s relatively simple, right? 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 background tiling?

They certainly can be.


SVG ALLOWS YOU REFERENCE ONE PATTERN FROM WITHIN A SECOND 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 same pattern with different color fills, rotations and scales
(like the sample above). Tiny files but crazy complexities.

I believe this special characteristic opens up a lot of new design possibilities
– once you get a feel for the basics.


SVG PATTERN AND VECTOR EDITORS

SVG patterns are very well-supported in all modern browsers, but are NOT ALWAYS
supported in your favorite vector editors. To my knowledge:

 * Adobe Illustrator: Illustrator has great pattern creation tools and has
   exported SVG patterns nicely for a decade. I haven’t tried importing existing
   patterns but I suspect results might be patchy.
 * Figma: Figma currently ignores the patterns in any imported SVG. IMHO this is
   Figma’s biggest oversight.
 * Inkscape: Inkscape imports and exports SVG patterns beautifully. I would
   recommend optimizing your final SVG though.
 * Sketch: I’m not a Sketch user, but my research seemed to point to it not
   supporting SVG patterns (I’m happy to be corrected though).
 * Boxy SVG: Excellent pattern import and export facilities. For me, Boxy’s
   abilities to manage patterns are worth the purchase price alone.

This shouldn’t be a deal breaker, but just be aware when selecting your tools.




SVG PATTERN GENERATORS

For now, let’s look at some ready-to-use ‘off-the-rack’ SVG pattern options
available. Take these as they are, or else use them as a jumping off point for
more interesting creations.




1. 10015.IO



Firstly, I have to address the ‘elephant in the room (or web application in this
case)’.

I’m truly not certain how to pronounce the name of this selection. Is it
‘ten-thousand-and-fifteen-dot-i-o’? I suspect they are riffing on a L33t-speak
spelling of ‘TOOLS.io’. However, for me that barely reads as ‘tools’ even when
paired with their ideal geometric logo font.

Can you substitute a ‘1’ as both a ‘T’ and an ‘L’ in the same word? Personally,
I would argue no. Maybe that’s just me?

Moving on to the positives…

The ‘SVG Pattern Generator’ itself is part of an impressive 50-strong suite of
free online tools on offer. The SVG pattern assets it generates aren’t wildly
creative. You can customize the repeating shape, color palette, scale, opacity,
rotation, and skew. This nice thing about this tool is:

 1. the UI is fast and easy to learn
 2. it generates genuine, ready-to-use SVG patterns (rather than generic slabs
    of SVG image like many other tools)

That makes this generator a handy ‘point-and-click’ sandbox for learning how SVG
patterns work. Change a setting. Look at the code. Repeat.

While you’re there, check out their SVG blob generator, CSS Glassmorphism
Generator, and Google Fonts Pair Finder.

Just remember to bookmark it – that’s a tough URL to recall ;) .




2. HERO PATTERNS



Hero Patterns, a project by UI designer and illustrator Steve Schoger, remains a
good resource.

Steve 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.

 * http://www.heropatterns.com/




2. IROS PATTERN FILLS



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

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.



 * http://iros.github.io/patternfills/




4. PATTERN MONSTER




A monsterously large collection of elegantly tiling SVG graphics – around 250 by
my count. It’s easy to quickly scale, color, rotate, and reposition the each
design.

Pattern Monster lets you export your tile as an CSS-ready SVG code, so you’ll
need to code your own SVG pattern definitions to use them within an SVG image.




5. MMMOTIF




Sébastien Noël has a jaw-dropping collection of simple, original and beautiful
design tools available at his fffuel.co site.

Of this group, his Mmmotif isometric 3d pattern generator is the best fit for
this list. Like Pattern Monster, you can mix and match shapes, colors, scaling,
and angles, to compose a bumpy 3d isometric tile.

 * https://fffuel.co/mmmotif/




6. SVGBACKGROUNDS.COM




Matt Lipman tipped me off to his SVG generator – SVGBackgrounds.com. This tool
currently offers 30 base patterns, but the colors and opacity can be customized
with a few clicks. When you’re done, it exports CSS-ready SVG that can be pasted
into your stylesheet. As was the case with Pattern Monster, you’ll need to
manually code SVG pattern definitions.

 * SVGBackgrounds.com


A HANDFUL OF HONORABLE MENTIONS…


 * Shapes4Free: A nice collection of vector patterns, although they are
   currently only presented as chunks of SVG – not technically as SVG pattern
   code.
 * SVG Patterns Gallery: A small SVG pattern collection based on Lea Verou’s
   CSS3 patterns. Hasn’t had any additions in quite a while but still
   worthwhile.
 * pppixelate: Another Seb tool. Usually we choose SVG to avoid pixelation. This
   tool revels in it, allowing you to draw pixel art tiles as SVG.
 * Geopattern: This is an interesting experiment in ‘procedural patterns
   generation’. Whatever you type into the text field is used as ‘seed’ to
   generate a new, unique pattern. A cool curiousity.
 * Trianglify Generator: This tool generates one very specific type of
   background SVG – a colored, faceted triangular matrix – almost like a
   low-polygon 3D surface. You can control the color, size, and randomness of
   the underlying grid.




WRAPPING UP


Great SVG patterns are a perfect blend of design inspiration and technical
know-how, and having good tools to support you certainly helps.

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


SHARE THIS ARTICLE

x
Alex Walker

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead
front-end design and dev for SitePoint and one-time SitePoint's Design and UX
editor with over 150+ newsletter written. Co-author of The Principles of
Beautiful Web Design. Now Alex is involved in the planning, development,
production, and marketing of a huge range of printed and online products and
references. He has designed over 60+ of SitePoint's book covers.

AlexWfree texturespatterns and texturesSVGtextures



UP NEXT

What Is SVG? Your Guide to SVG FilesIvaylo Gerchev, Maria Antonietta Perna
Design Tricks with SVG Filters: A Masked Blur EffectAlex Walker
‘Reskinnable’ SVG Symbols: How to Make Them (..and Why)Massimo Cassandro
Make Your Own Responsive SVG Graphs & InfographicsAlex Walker
Boxy SVG: A Fast, Simple, Insanely Useful, FREE SVG EditorAlex Walker
Killer Backgrounds with Illustrator’s SVG Pattern ToolJames George


 * STUFF WE DO

 * Premium
 * Newsletters
 * Forums


 * ABOUT

 * Our story
 * Terms of use
 * Privacy policy
 * Corporate memberships


 * CONTACT

 * Contact us
 * FAQ
 * Publish your book with us
 * Write an article for us
 * Advertise




 * CONNECT

 * 

© 2000 – 2022 SitePoint Pty. Ltd.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of
Service apply.