Chapter 25: SVG Patterns
SVG Patterns are one of the most fun and powerful ways to fill shapes (rectangles, circles, paths, text, polygons, etc.) with a repeating tile / texture / wallpaper made of SVG elements — instead of a solid color or gradient.
Think of it like:
- You create a small “tile” (a little drawing: dots, stripes, hearts, stars, checkerboard, bricks, etc.)
- You tell SVG: “Repeat this tile forever in all directions to fill the shape”
- Result: seamless repeating pattern, completely vector (zoom forever, still sharp)
This is how you get:
- Polka-dot backgrounds
- Diagonal stripes
- Checkerboard / grid
- Brick wall / honeycomb
- Custom fabric / paper textures
- Fun decorative icons or text fills
1. Basic Structure – The Two Main Tags
You need two elements:
- <pattern> → defines the repeating tile (lives inside <defs>)
- fill=”url(#myPattern)” → applies it to any shape
Basic skeleton:
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg ...> <defs> <pattern id="myPattern" width="20" height="20" patternUnits="userSpaceOnUse"> <!-- Your small repeating tile goes here --> <circle cx="10" cy="10" r="5" fill="black"/> </pattern> </defs> <rect width="400" height="300" fill="url(#myPattern)"/> </svg> |
2. Key Attributes of <pattern>
| Attribute | What it means | Default | Most common values | Notes |
|---|---|---|---|---|
| id | Unique name to reference | — | “dots”, “stripes”, “checker” | Must have! |
| width | Width of one tile (repeat unit) | 1 | 10, 20, 50, 100 | In user units or % |
| height | Height of one tile | 1 | same as width usually | Usually square, but can be rectangle |
| patternUnits | Coordinate system for width/height | objectBoundingBox | userSpaceOnUse (most used), objectBoundingBox | userSpaceOnUse = absolute pixels |
| patternContentUnits | Coordinate system for content inside pattern | userSpaceOnUse | userSpaceOnUse, objectBoundingBox | Usually leave default |
| x / y | Offset of first tile | 0 | 5, -10 | Shift pattern start |
| patternTransform | Rotate / scale / skew the whole pattern | none | rotate(45), scale(2) | Very powerful |
3. Your First SVG Pattern – Simple Polka Dots (Copy-Paste Now!)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Pattern – Polka Dots</title> </head> <body> <h1>Simple Polka Dot Pattern Fill</h1> <svg width="500" height="400" viewBox="0 0 500 400" style="border:1px solid #eee;"> <defs> <pattern id="dots" width="40" height="40" patternUnits="userSpaceOnUse"> <!-- One tile: black dot in center --> <circle cx="20" cy="20" r="8" fill="black"/> </pattern> </defs> <rect x="50" y="50" width="400" height="300" fill="url(#dots)" stroke="gray" stroke-width="2"/> <text x="250" y="200" font-size="60" text-anchor="middle" fill="white"> Polka Dots! </text> </svg> </body> </html> |
Result: Big rectangle filled with repeating black polka dots every 40×40 units.
4. More Real & Fun Pattern Examples (Try These!)
A. Diagonal Stripes (Very Popular)
XML
|
0 1 2 3 4 5 6 7 8 9 |
<pattern id="stripes" width="20" height="20" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="20" height="10" fill="#ff6b6b"/> <rect x="0" y="10" width="20" height="10" fill="#4ecdc4"/> </pattern> |
→ Red-cyan stripes (change colors to your brand)
B. Checkerboard / Grid
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<pattern id="checker" width="40" height="40" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="20" height="20" fill="#eee"/> <rect x="20" y="0" width="20" height="20" fill="#333"/> <rect x="0" y="20" width="20" height="20" fill="#333"/> <rect x="20" y="20" width="20" height="20" fill="#eee"/> </pattern> |
→ Classic black-white checkerboard
C. Small Hearts Pattern (Romantic / Decorative)
XML
|
0 1 2 3 4 5 6 7 8 9 |
<pattern id="hearts" width="60" height="60" patternUnits="userSpaceOnUse"> <path d="M30 10 Q 20 0 10 10 Q 0 20 10 30 Q 20 40 30 50 Q 40 40 50 30 Q 60 20 50 10 Q 40 0 30 10 Z" fill="pink" transform="scale(0.6)"/> </pattern> |
→ Tiny repeating hearts (adjust scale/transform)
D. Rotated Diagonal Pattern (45° Stripes)
XML
|
0 1 2 3 4 5 6 7 8 9 |
<pattern id="diagonal" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> <rect x="0" y="0" width="40" height="20" fill="navy"/> <rect x="0" y="20" width="40" height="20" fill="gold"/> </pattern> |
→ Use patternTransform to rotate the entire tile pattern
E. Pattern on Stroke (Repeating Border)
XML
|
0 1 2 3 4 5 6 |
<circle cx="250" cy="200" r="150" fill="none" stroke="url(#dots)" stroke-width="40"/> |
→ Thick dotted border around circle
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Use patternUnits=”userSpaceOnUse” → easiest, size in absolute units (pixels)
- Make tile size small (10–60) → smooth repeat without huge file
- Add patternTransform=”rotate(45) scale(1.2)” → endless design possibilities
- Common mistake: Forget width/height on <pattern> → pattern invisible or huge
- Pro trick: Put complex SVG (group of shapes, text, image) inside pattern → crazy textures
- Performance: Very lightweight — much better than repeating background-image in CSS for vectors
- Combine with fill-opacity=”0.7″ or filters → semi-transparent patterns
Understood SVG Patterns fully now? They’re the secret behind most creative, repeating, textured fills you see in modern web design and illustrations.
Tell me what you want next:
- Animated pattern (moving stripes / marching ants)?
- Pattern with image inside (<image> tag)?
- Complex pattern (honeycomb + text)?
- Pattern on text fill?
- Or compare patterns vs gradients vs images?
Just say — we can build any pattern style together right now! 🚀
