SVG Pattern Generator

Generate seamless SVG background patterns and copy them as an SVG file or a ready-to-use CSS background-image data URI.

Pattern

Shape Size8px

Spacing24px

Stroke Width2px

Foreground

#6366f1

Background

#ffffff

Preview

CSS background

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23ffffff'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%236366f1'/%3E%3C/svg%3E");

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#ffffff"/><circle cx="16" cy="16" r="4" fill="#6366f1"/></svg>