SVG Pattern Generator
Create beautiful repeating SVG patterns — dots, stripes, crosshatch, hexagons, and more — with instant preview and code export.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Popular SVG Pattern Types
The most commonly used repeating SVG patterns for web backgrounds.
- Polka dots: configurable size and spacing — subtle texture
- Diagonal stripes: adjustable width, angle, and color
- Crosshatch: two sets of lines creating a grid texture
- Hexagonal grid: honeycomb pattern for modern design
- Triangular grid: geometric, technical look
- Brick pattern: offset rows of rectangles
Free SVG Pattern Generators
Best online tools for generating SVG patterns.
- Pattern.monster (pattern.monster): 180+ patterns, fully customizable colors and size
- Hero Patterns (heropatterns.com): MIT-licensed patterns as CSS background code
- SVGBackgrounds.com: patterns with CSS integration
- Doodad.dev/pattern-generator: organic, artistic patterns
Creating Custom SVG Patterns
Build your own SVG pattern from scratch.
- Define a small tile: <pattern id='tile' width='20' height='20' patternUnits='userSpaceOnUse'>
- Add your shape: <circle cx='10' cy='10' r='5' fill='#333'/>
- Apply to any element: <rect width='100%' height='100%' fill='url(#tile)'/>
- Adjust width/height to change tile frequency
- Add patternTransform='rotate(45)' for angled patterns
Frequently Asked Questions
Are SVG patterns free to use commercially?
Pattern.monster patterns are royalty-free. Hero Patterns are MIT-licensed. Always check the license of the specific pattern generator you use.
How do I export a pattern for CSS use?
Copy the SVG pattern code and URL-encode it for a CSS data URI: background-image: url('data:image/svg+xml,[url-encoded-svg]'). Pattern.monster provides ready-to-use CSS code.
Can I animate SVG patterns?
Yes. Animate the pattern's x/y attributes or the shapes inside the pattern. Animated patternTransform creates moving/spinning pattern effects.
How do I make a seamless pattern?
The pattern tile must seamlessly tile. Geometric patterns are seamless by math. For custom patterns: ensure any shape that extends past a tile edge has its mirror image at the opposite edge.
What's the best pattern density for a subtle background?
For subtle textures: pattern width/height of 20–40px with shapes occupying 10–20% of the tile area. Too dense = cluttered; too sparse = invisible.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free