Open menu

SVG Pattern Generator

Design seamless, lightweight background patterns from 18 types, including dots, polka dots, grid and graph paper, diagonal stripes, cross-hatch, checkers, triangles, hexagons, honeycomb, zigzag, waves, plus signs, rings, diamonds, bricks, stars and fish scales. Adjust tile size, element size, line width, color and opacity. The result is a tiny SVG embedded in your CSS, so there's no image to download.

Preset gallery

Accessibility checks

  • Pass The pattern is subtle enough (strength 2.2) to sit behind text.
  • Pass The tile is only 153 bytes and is embedded in the CSS: no extra request.

Export code

.pattern {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.4%22%20fill%3D%22rgba%2879%2C%2070%2C%20229%2C%200.35%29%22%2F%3E%3C%2Fsvg%3E");
}
Favourites on this device (0)

No favourites yet.

Pattern
Colors
Pattern color
Background color

How to use the SVG pattern generator

  1. Pick a pattern from the gallery: dots, lines, shapes, geometric or wavy.
  2. Set the tile size: the distance before the pattern repeats.
  3. Set the element size and line width to make dots bigger or lines bolder.
  4. Choose colors: pattern color, its opacity and the background.
  5. Export CSS (background-color plus background-image), SCSS variables, the SVG tile, or Tailwind arbitrary values.

How it works

The generator writes a small SVG, for example a single circle in a 24 × 24 tile for dots, and URL-encodes it into a data: URI:

background-color: #FFFFFF;
background-image: url("data:image/svg+xml,%3Csvg …%3E");

background-repeat defaults to repeat, so the tile fills the element. Hexagons use a wider tile (three radii by √3 radii) because a honeycomb only repeats after two offset columns.

Worked examples

Example 1: a subtle section background

Load Dots dense and set the opacity to around 0.15. On a white or light grey section, it adds texture without competing with content. Put cards or text panels on top with solid backgrounds.

Example 2: a blueprint header

Load Blueprint: white graph-paper lines at 35% opacity on deep blue. It’s perfect for developer tools, engineering products and documentation headers. Increase the tile size for a calmer grid.

Example 3: a warning stripe

Load Diagonal bold: thick yellow diagonal stripes on near-black, the classic “caution” look. Use it sparingly, for example as a thin banner across the top of a staging site.

Tips

  • Smaller tiles feel busier. Start large and scale down.
  • Use the same pattern color as your brand accent at low opacity for a cohesive look.
  • Animate a pattern by moving its background-position with a long, slow animation. Remember a reduced-motion rule.
  • The SVG tile export works as an image in design tools such as Figma.

Common mistakes

  • Patterns that are too strong. Background patterns should stay in the background. If people notice the pattern before the content, lower the opacity.
  • Tiny tiles with thick lines. They create a shimmering effect on some screens. Increase the tile size.

Patterns also work well as subtle placeholders in empty states, image slots and loading areas, where a plain grey box would look unfinished.

Frequently asked questions

How do the patterns tile seamlessly?

Each pattern is drawn inside one small tile. Shapes that cross the tile edge are drawn at every neighbouring position too, and the tile clips them, so the pieces line up perfectly when the browser repeats the tile.

Why is the pattern color semi-transparent?

Using opacity instead of a fixed light color lets the same pattern work on any background. You can change the background color in CSS without regenerating the SVG.

Will a pattern slow my page down?

No. A tile is usually under 1 KB and is embedded in your CSS as a data URI, so there's no extra request. The browser draws it once and repeats it.

Can I put text on top of a pattern?

Yes, as long as the pattern stays subtle. Busy, high-contrast patterns behind text make it harder to read, especially for people with dyslexia or low vision. The check warns when a pattern is strong and small; lower the opacity or put text on a solid panel.

Can I change the pattern size?

Yes. Use the size and scale controls to make the tile larger or smaller and the shapes denser or more open; the CSS export sets background-size to match.

Sources