Beautiful Dingbats

How to use the Pattern Generator

Before you begin, click the Shuffle Preset Examples button to get an idea of what the pattern generator can do.

Once you’re ready to start click get started.

Choosing a pattern Style

Start by choosing a pattern style. The styles are in sorted roughly based on shape. You can browse through the styles with the arrow buttons. Click one you like to start designing your pattern.

You can also start from a preset example or by clicking the “generate random pattern” button.

Transforming your pattern

This is the fun part.

You can transform your pattern using the transform sliders. Every style has two transforms.

The transforms differ from style to style. Sometimes they alter the line thickness, or the position or size of elements. Sometimes the transforms change the shapes of elements.

Play around with the transforms until you find a pattern you like.

You can also scale and rotate your pattern.

Choosing Colors

You can choose three colors: a background color, a primary color and a secondary color. Your background color can be transparent. Change color palettes by clicking on the arrows above color picker.

The color picker includes palettes popular with web developers including Open Color, Tailwind CSS, and Material Design.

You can also add any hex color code using the hex input below the each color picker. e.g. #FEFEFE

Sharing and Exporting your Pattern

Once you’ve finished tweaking your pattern and are ready to share it with the world. You’ll need to export it. There are a few ways to do this:

Share URL

Use the share your pattern link to share, collaborate, or save your pattern for later. It’s a link to this page with the parameters of your pattern encoded in the url.

If you navigate to that link, you’ll find yourself on this page, but with your pattern loaded first.

Export as inline SVG

If you’re planning on using your pattern as a background on a website. You should export it as an inline SVG. There are two options for this:

Inline in HTML — You can inline your SVG and set its height and width to the size of whatever element you want it to fill.

Inline in CSS — you can use it as background image in your CSS with a dataURL.

Read more about the advantages of using inline SVGs below.

Download as SVG

If you want to edit your pattern in a vector graphics program (e.g. Adobe Illustrator or Inkscape) use this option.

The SVG has been formatted to load correctly in these programs.

Download Image as JPEG or PNG

You can download a large image of your pattern in JPEG or PNG formats. You can use these anywhere you normally use a photo. E.g. a wallpaper for your phone or computer. a banner image for social media. A leaflet for your curtain cleaning company.

You choose any height or width you like, but note very large sizes can take a while to convert from SVG to Raster.

If your pattern has a transparent background, make sure you choose to export it as PNG. Otherwise your background will default to white.

Download Tile as JPEG or PNG

There are lots of programs that need a single tile of your pattern in JPEG or PNG format. e.g. Spreadsheet programs like Excel or Numbers.

_Note — that when you download your pattern as a tile, it will lose its rotation and scale. You’ll need to rescale and orient the pattern in whatever context you’re using it in.

If you're using this tile as a repeat pattern on the web and want to keep it's rotation. You'll need to set it as the background of an element and then apply transform:rotate(45deg) to that element to achieve the same affect.

Using SVG Patterns on the Web

When using patterns as background images in your website. Use SVGs wherever possible. Here’s why:

Site Speed

Using raster (pixel based) background textures in your website can slow your site down a lot. For most patterns (like the ones generated with this tool) an SVG has a much smaller file size than a PNG or JPEG.

You can also minimise HTTP requests by inlining SVGs in your HTML

SVGs look crisp on any display.

Raster based backgrounds can look blurry on screens with a high DPI. (e.g. iPhones, and Retina Displays). SVGs look crisp regardless of the DPI of the device.

Control with CSS

SVG patterns can styled using CSS. So you can change your pattern’s attributes based on context or events. E.g. Mouseover of Click

You can even add classes, ids and data attributes, just like regular HTML elements.

Royatly Free Patterns

All the patterns are free to use by anyone anywhere you like.

But please link back to this site where appropriate, and share it generously! I’d really appreciate it.

First Published — 11 February 2020
Last Update — 12 February 2020

by John Bartlet