SVG Pattern Generator

Create repeating SVG patterns. Choose a type, customize colors and spacing, then copy or download.

Pattern Type

Pattern Color

Background Color

Spacing: 20px

Element Size: 4px

Rotation: 0°

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
  <rect width="100%" height="100%" fill="#ffffff" />
  <defs>
    <pattern id="p" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
      <circle cx="10" cy="10" r="2" fill="#2563eb" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#p)" />
</svg>

About SVG Pattern Generator

SVG Pattern Generator creates repeating SVG background patterns with configurable shapes: dots, lines, crosses, diamonds, hexagons, and more. Adjust the pattern color, spacing, element size, and background color — then download the SVG or copy the CSS background-image data URI.

SVG patterns are scalable, lightweight, and perfect for backgrounds, decorative elements, and texture overlays. Unlike CSS gradient patterns, SVG patterns support a wider variety of shapes and can be scaled independently.

The tool generates both a standalone SVG file and an inline CSS background-image property for embedding.

Features

✓Multiple pattern shapes: dots, lines, crosses, diamonds, hexagons
✓Configurable colors, spacing, and element size
✓Download as SVG file or copy CSS background-image
✓Live preview
✓Transparent background option

Common Use Cases

→Creating patterned section backgrounds for websites
→Adding subtle texture to cards and panels
→Generating decorative overlays for images
→Making pattern assets for presentations