SVG Pattern Maker

Generate customizable, lightweight SVG background patterns (dots, grids, waves) for landing pages.

Pattern Type

Pattern Color

Background Color

Size: 20px

Spacing: 40px

Preview

<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="20" cy="20" r="10" fill="#667eea" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="#ffffff" />
  <rect width="100%" height="100%" fill="url(#pattern)" />
</svg>