Pattern Type

Colors

Adjustments

Pattern ID

Presets

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="pattern-1" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="3.3333333333333335" fill="#667eea" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="#1a1a2e" />
  <rect width="100%" height="100%" fill="url(#pattern-1)" opacity="1" />
</svg>

CSS Background

.pattern-background {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpattern%20id%3D%22pattern-1%22%20width%3D%2220%22%20height%3D%2220%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%223.3333333333333335%22%20fill%3D%22%23667eea%22%20%2F%3E%0A%20%20%20%20%3C%2Fpattern%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%231a1a2e%22%20%2F%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23pattern-1)%22%20opacity%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 20px 20px;
}

Data URI

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpattern%20id%3D%22pattern-1%22%20width%3D%2220%22%20height%3D%2220%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%223.3333333333333335%22%20fill%3D%22%23667eea%22%20%2F%3E%0A%20%20%20%20%3C%2Fpattern%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%231a1a2e%22%20%2F%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23pattern-1)%22%20opacity%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E

SVG Pattern Tips

  • Scalability: SVG patterns scale infinitely without quality loss
  • Performance: Inline SVG patterns load instantly, no HTTP requests
  • Customization: Easily change colors via CSS variables
  • Accessibility: Add role="img" and aria-label for screen readers
  • Data URI: Embed directly in CSS for single-file solutions