SVG Patterns

Beginner
⏱️ 8 min read
📚 Updated: Aug 2025
🎯 2 Examples
Fills
SVG patterns tutorial illustration showing repeating fills

What You’ll Learn

SVG patterns let you define a small tile and repeat it to fill any shape. This is perfect for backgrounds, textures, charts, and decorative UI elements.

You’ll learn how to define <pattern> inside <defs>, control the tile size using width/height, choose the coordinate system with patternUnits, and apply the pattern with fill="url(#id)".

⚡ Quick Reference — SVG Pattern

Element <pattern>

Define a repeating tile

Apply url(#id)

Use in fill (or stroke)

Tile size width / height

Controls how often it repeats

Units patternUnits

userSpaceOnUse or objectBoundingBox

Transform patternTransform

Rotate/scale/skew the pattern

Basic Syntax
<svg>
  <defs>
    <pattern id="p" patternUnits="userSpaceOnUse" width="10" height="10">
      <circle cx="5" cy="5" r="2" />
    </pattern>
  </defs>
  <rect fill="url(#p)" />
</svg>

👀 Live Preview — Dots & Stripes

Two common pattern tiles: polka dots and vertical stripes.

Dots
Stripes
1

Polka Dot Pattern Fill

Define a small dot tile and repeat it across a larger rectangle.

index.html
<svg width="220" height="180" viewBox="0 0 220 180">
  <defs>
    <pattern id="dots" patternUnits="userSpaceOnUse" width="12" height="12">
      <circle cx="6" cy="6" r="3" fill="#ef4444" />
    </pattern>
  </defs>
  <rect x="10" y="10" width="200" height="160" rx="16" fill="url(#dots)" />
</svg>
Try It Yourself
2

Striped Pattern (Multiple Shapes)

Patterns can contain multiple SVG elements. Here we combine two rectangles to form a repeating stripe tile.

index.html
<svg width="220" height="180" viewBox="0 0 220 180">
  <defs>
    <pattern id="stripes" patternUnits="userSpaceOnUse" width="20" height="20">
      <rect width="10" height="20" fill="#3b82f6" />
      <rect x="10" width="10" height="20" fill="#f8fafc" />
    </pattern>
  </defs>
  <rect x="10" y="10" width="200" height="160" rx="16" fill="url(#stripes)" stroke="#e2e8f0" />
</svg>

💡 Best Practices

Do

  • Start with patternUnits="userSpaceOnUse" for predictable sizing
  • Keep tile sizes small to reduce repetition artifacts
  • Use patternTransform for rotation or scaling
  • Name ids clearly (e.g. dots, stripes)
  • Test patterns on different shapes (rectangles, circles, paths)

Don’t

  • Reuse the same pattern id across multiple inline SVGs on one page
  • Use huge tile sizes for small textures (it looks repetitive)
  • Forget that objectBoundingBox uses 0–1 coordinates
  • Overcomplicate patterns when a simple gradient works better
  • Assume patterns will look the same across all resolutions without checking

❓ Frequently Asked Questions

An SVG <pattern> defines a small tile inside <defs>. When you use fill="url(#patternId)", the tile repeats to cover the shape.
patternUnits controls the coordinate system for the pattern tile. userSpaceOnUse uses absolute SVG units; objectBoundingBox uses relative 0–1 units based on the target shape’s bounding box.
Yes. You can use stroke="url(#patternId)" to paint the outline with a repeating pattern (and set stroke-width as needed).
This often happens with objectBoundingBox units or when the tile size is mismatched to the target. Try patternUnits="userSpaceOnUse" and adjust width/height to control repetition.
Use patternTransform, for example patternTransform="rotate(45)" or patternTransform="scale(0.5)".

Draw a Polygon Next

Learn how to build triangle, pentagon, and custom polygon shapes using <polygon>.

SVG Polygon →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

4 people found this page helpful

SVG Path SVG Polygon