Pattern Monster
460 seamless SVG patterns you recolour in-browser and copy as SVG or CSS
About
Pattern Monster is a browser pattern generator that ships 460 pre-drawn, seamlessly tiling SVG patterns across 85 families — waves, chevrons, herringbone, hexagons, scales, plaid, Memphis, Egyptian, Japanese, Chinese, African and seasonal sets. Each pattern exposes stroke width, spacing, rotation, scale and up to five colour stops, and the result can be copied as raw SVG, as a CSS background-image data URI, or downloaded as SVG or PNG. It is a SvelteKit app by Naveen CS; the free tier covers the whole library, and a separate Pro tier lives at pro.pattern.monster. Useful for page backgrounds, section dividers, empty-state art, packaging and apparel.
For an agent
Reach for this when a page needs a non-photographic background texture and you do not want another dependency — the output is a self-contained SVG or a CSS background-image data URI, so it drops into Tailwind, plain CSS or a React style prop with zero install. Deep-link straight to https://pattern.monster/<slug> (for example /waves-1, /herringbone-3, /memphis-pattern-4) instead of trying to browse; the homepage is a SvelteKit shell that a plain fetch renders as 'undefined'. Set opacity low and match the pattern stroke to a CSS variable, and check the tile size — a 120x80 tile that looks fine on a hero will visibly repeat inside a small card.
Why it is here. It is the largest free library of parametric, genuinely seamless SVG patterns on the web, and the output format — inline SVG or a CSS data URI — is the one format that survives every framework and build tool.
Install command, framework, licence and component list.
Helps you build
Templates
- Waves - 1 · Seamless tileable SVG background pattern — 'Waves' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Chevron - 1 · Seamless tileable SVG background pattern — 'Chevron' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Straight Lines · Seamless tileable SVG background pattern — 'Straight Lines' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Cross Section · Seamless tileable SVG background pattern — 'Cross Section' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Brick Wall - 1 · Seamless tileable SVG background pattern — 'Brick Wall' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Herringbone - 1 · Seamless tileable SVG background pattern — 'Herringbone' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Flower - 1 · Seamless tileable SVG background pattern — 'Flower' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Plus - 1 · Seamless tileable SVG background pattern — 'Plus' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Circles - 1 · Seamless tileable SVG background pattern — 'Circles' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Concentric Circles - 1 · Seamless tileable SVG background pattern — 'Concentric Circles' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Adjointed Circles · Seamless tileable SVG background pattern — 'Adjointed Circles' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Adjointed Diamonds · Seamless tileable SVG background pattern — 'Adjointed Diamonds' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Diamonds - 1 · Seamless tileable SVG background pattern — 'Diamonds' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Hexagon - 1 · Seamless tileable SVG background pattern — 'Hexagon' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Overlapping Hexagons · Seamless tileable SVG background pattern — 'Overlapping Hexagons' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Squares & Squares - 1 · Seamless tileable SVG background pattern — 'Squares & Squares' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Squares & Diamonds · Seamless tileable SVG background pattern — 'Squares & Diamonds' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Squares & Circles - 1 · Seamless tileable SVG background pattern — 'Squares & Circles' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Squares & Plus - 1 · Seamless tileable SVG background pattern — 'Squares & Plus' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Squares & Stars - 1 · Seamless tileable SVG background pattern — 'Squares & Stars' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Stars & Lines - 1 · Seamless tileable SVG background pattern — 'Stars & Lines' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Triangles - 1 · Seamless tileable SVG background pattern — 'Triangles' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Inverted Triangles · Seamless tileable SVG background pattern — 'Inverted Triangles' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Checkerboard · Seamless tileable SVG background pattern — 'Checkerboard' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Japanese Pattern - 1 · Seamless tileable SVG background pattern — 'Japanese Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Eyes - 1 · Seamless tileable SVG background pattern — 'Eyes' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Jigsaw · Seamless tileable SVG background pattern — 'Jigsaw' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Railroad · Seamless tileable SVG background pattern — 'Railroad' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Octagons - 1 · Seamless tileable SVG background pattern — 'Octagons' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Lines - 1 · Seamless tileable SVG background pattern — 'Lines' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Scales - 1 · Seamless tileable SVG background pattern — 'Scales' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Leaves - 1 · Seamless tileable SVG background pattern — 'Leaves' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Pipes · Seamless tileable SVG background pattern — 'Pipes' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Zebra · Seamless tileable SVG background pattern — 'Zebra' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Memphis Pattern - 1 · Seamless tileable SVG background pattern — 'Memphis Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Greek Key · Seamless tileable SVG background pattern — 'Greek Key' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Chinese Pattern - 1 · Seamless tileable SVG background pattern — 'Chinese Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- New Pattern - 1 · Seamless tileable SVG background pattern — 'New Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Double Bubble - 1 · Seamless tileable SVG background pattern — 'Double Bubble' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Stars - 1 · Seamless tileable SVG background pattern — 'Stars' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Semicircles - 1 · Seamless tileable SVG background pattern — 'Semicircles' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Songket Pattern - 1 · Seamless tileable SVG background pattern — 'Songket Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Candy Cane - 1 · Seamless tileable SVG background pattern — 'Candy Cane' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Christmas Bells - 1 · Seamless tileable SVG background pattern — 'Christmas Bells' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Christmas Gift · Seamless tileable SVG background pattern — 'Christmas Gift' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Christmas Pattern - 1 · Seamless tileable SVG background pattern — 'Christmas Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Christmas Tree - 1 · Seamless tileable SVG background pattern — 'Christmas Tree' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Christmas Tree Balls · Seamless tileable SVG background pattern — 'Christmas Tree Balls' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Santa Claus · Seamless tileable SVG background pattern — 'Santa Claus' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Snowflakes - 1 · Seamless tileable SVG background pattern — 'Snowflakes' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Cubes - 1 · Seamless tileable SVG background pattern — 'Cubes' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Rectangles & Squares - 1 · Seamless tileable SVG background pattern — 'Rectangles & Squares' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Stained Glass · Seamless tileable SVG background pattern — 'Stained Glass' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Tiles - 1 · Seamless tileable SVG background pattern — 'Tiles' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Ethnic Pattern - 1 · Seamless tileable SVG background pattern — 'Ethnic Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Mexican Pattern - 1 · Seamless tileable SVG background pattern — 'Mexican Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Doodle Pattern - 1 · Seamless tileable SVG background pattern — 'Doodle Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Plaid Pattern - 1 · Seamless tileable SVG background pattern — 'Plaid Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Batik Pattern - 1 · Seamless tileable SVG background pattern — 'Batik Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- African Pattern - 1 · Seamless tileable SVG background pattern — 'African Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Blobs · Seamless tileable SVG background pattern — 'Blobs' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Tribal Pattern - 1 · Seamless tileable SVG background pattern — 'Tribal Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Squares & Triangles - 1 · Seamless tileable SVG background pattern — 'Squares & Triangles' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Geometric Pattern - 1 · Seamless tileable SVG background pattern — 'Geometric Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Stripes - 1 · Seamless tileable SVG background pattern — 'Stripes' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Terrazzo - 1 · Seamless tileable SVG background pattern — 'Terrazzo' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Halloween Pattern - 1 · Seamless tileable SVG background pattern — 'Halloween Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Sprinkles - 1 · Seamless tileable SVG background pattern — 'Sprinkles' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Squares - 1 · Seamless tileable SVG background pattern — 'Squares' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Moroccan Pattern - 1 · Seamless tileable SVG background pattern — 'Moroccan Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Squiggle · Seamless tileable SVG background pattern — 'Squiggle' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Interlocked Hexagons - 1 · Seamless tileable SVG background pattern — 'Interlocked Hexagons' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Lanterns · Seamless tileable SVG background pattern — 'Lanterns' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Rope · Seamless tileable SVG background pattern — 'Rope' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Circles & Diamonds · Seamless tileable SVG background pattern — 'Circles & Diamonds' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Patches · Seamless tileable SVG background pattern — 'Patches' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Egyptian Pattern - 1 · Seamless tileable SVG background pattern — 'Egyptian Pattern' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Circles & Hexagons - 1 · Seamless tileable SVG background pattern — 'Circles & Hexagons' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Chainlink - 1 · Seamless tileable SVG background pattern — 'Chainlink' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Quarter Circles - 1 · Seamless tileable SVG background pattern — 'Quarter Circles' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Hearts - 1 · Seamless tileable SVG background pattern — 'Hearts' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Giraffe · Seamless tileable SVG background pattern — 'Giraffe' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Houndstooth - 1 · Seamless tileable SVG background pattern — 'Houndstooth' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Leopard · Seamless tileable SVG background pattern — 'Leopard' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
- Liquid Drip - 1 · Seamless tileable SVG background pattern — 'Liquid Drip' family; recolour, resize, rotate and stroke-adjust, then copy the SVG/CSS or download SVG/PNG.
Notable for
- 460 patterns across 85 families
- seamless tiling maths already solved
- copy as SVG or CSS data URI
- per-pattern permalink URLs
- up to 5 colour stops per pattern
Provenance
Verified 2026-08-15. HTTP 200. https://pattern.monster (raw HTML, SvelteKit data payload parsed for all 460 pattern title/slug records), https://pattern.monster/waves-1 (200, confirms per-pattern permalink route), https://pro.pattern.monster/pricing (200 but JS-only shell), https://pattern.monster/license + /about + /terms + /faq (all 404), WebFetch of homepage (returned unrendered 'undefined' placeholders), web search for licence and authorship
