SVG Pattern Generator

Create beautiful, scalable vector patterns directly in your browser. Export native CSS backgrounds or raw SVG data URIs instantly.

SVG Pattern Generator

Seamless SVG backgrounds for your UI

dots32x32px

Controls

Scale32px

Width1x

Opacity50%

CSS

background-color: #0f172a;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%230f172a%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%224%22%20fill%3D%22%233b82f680%22%2F%3E%3C%2Fsvg%3E");

SVG

<svg width="1600" height="900" viewBox="0 0 1600 900" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="pattern" patternUnits="userSpaceOnUse" width="32" height="32"><circle cx="16" cy="16" r="4" fill="#3b82f680"/></pattern></defs><rect width="1600" height="900" fill="#0f172a"/><rect width="1600" height="900" fill="url(#pattern)"/></svg>