Patterns

SVG Patterns

Scalable SVG fills for textures, grids, and decorative backgrounds.

Preview

Export

.svg-pattern {
  background-color: #fafafa;
  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%3E%0A%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20fill%3D%22%23a1a1aa%22%2F%3E%0A%3C%2Fsvg%3E");
  background-size: 24px 24px;
}

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <circle cx="12" cy="12" r="3" fill="#a1a1aa"/>
</svg>