Skip to content
Snaplytics Tools

SVG Pattern Generator

Pick a shape, set colours, size, spacing and angle — then copy CSS or download SVG/PNG.

Dots pattern, 1200 by 630

1200×630 · tile 62×62 px · repeats seamlessly in both directions

Pattern · 38 shapes

Dots & lines
Geometric
Symbols
Colours
Shape
Transform
Canvas

Only the picture you download has a size. The CSS below is resolution-free — it covers an element of any size at the pixel dimensions set above.

PNG scale

The drawing is vector, so 2× is the same picture measured again rather than an enlargement. Retina screens and print want it.

.pattern {
  background-color: #eef2ff;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2262%22%20height%3D%2262%22%20viewBox%3D%220%200%2062%2062%22%3E%3Cg%20fill%3D%22%232563eb%22%20stroke%3D%22none%22%3E%3Cg%20transform%3D%22translate(15%2015)%20scale(0.32)%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 62px 62px;
}

One tile, repeated by the browser. It is a data URI, so the background costs no extra request and no image file to host.

How it works

How to make an SVG pattern?

  1. Pick a shape

    Choose from 38 patterns — dots, stripes, hexagons, waves, brick and more.

  2. Set the colours

    Pick shape and background colours. Use solid, gradient or transparent.

  3. Tune the tiling

    Adjust size, spacing, rotation, skew and opacity. Stays seamless at any angle.

  4. Take it away

    Copy as CSS or React, or download SVG, a single tile or PNG. No watermark, no upload.

Spec sheet

Features

38 patterns

Dots, stripes, grids, waves, hexagons, brick, stars, chain and more.

Six things to tune

Size, spacing, line width, rotation, skew and opacity — in px and degrees.

Solid, gradient or transparent

Flat colour, a two-stop gradient, or transparent so it sits over anything.

Seamless when rotated

Rotation turns the whole tiling, so edges never show and lines stay continuous.

CSS, React, SVG or a data URI

Copy a CSS rule, React style object, raw SVG, or encoded data URI.

SVG, one tile, or a PNG

Download the full canvas, a single tile, or a PNG at 1× or 2×.

Shuffle and surprise

One click for a new palette, shape or full pattern — always usable.

Nothing leaves the browser

Built and exported on your machine. No account, no upload, no watermark.

Where it fits

What people use a pattern for?

A website background

A data URI in your stylesheet: no image file to host, no extra request, and it scales to any screen because it is vector all the way down.

Social and OG cards

Export at 1200×630 for a link preview, 1080×1080 for a post or 1080×1920 for a story, and put your own text over it.

Headers, banners and wallpapers

X, LinkedIn and YouTube banner sizes are presets, as are 1080p desktop and phone wallpaper. The PNG comes out at the exact pixels.

Behind a slide or a mockup

Drop the tile into Figma, Canva or a deck as a repeating fill — one small SVG that stays crisp however far it is scaled up.

Questions

Frequently asked questions

Is this free, and is there a watermark?

Yes — free, no watermark, no signup. Patterns are yours to use commercially.

Do the patterns tile seamlessly?

Yes, in both directions. Rotation and skew turn the whole lattice, so seams never appear.

Why does the CSS change when I rotate the pattern?

A rotated lattice has no upright tile for CSS to repeat, so the export becomes one stretched layer that tiles inside the SVG instead — still seamless, still a data URI.

What is a data URI background, and should I use one?

The SVG is inlined in your CSS — no extra request, no file to host. Prefer a file? Download the SVG or tile instead.

Can I export a transparent pattern?

Yes. Set background to Transparent — PNG keeps alpha, and CSS lays the pattern over whatever is behind it.

Related tools

SVG Blob Generator

Circle Crop Image

LinkedIn Banner Maker

GIF Splitter

Color Palette from Image

TikTok Comment Generator

Instagram Grid Maker

Instagram Story Generator

Image Resizer

Low Quality Image Maker

Collage Maker

Add Text to Image

All Image Tools