Patterns

Code

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <defs>
    <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="3" fill="navy"/>
    </pattern>
    <pattern id="stripes" width="10" height="10" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="10" stroke="maroon" stroke-width="3"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="80" height="80" fill="url(#dots)"/>
  <rect x="110" y="10" width="80" height="80" fill="url(#stripes)"/>
</svg>

Explanation

A pattern element defines a tileable graphic that repeats to fill a shape, referenced via url(#id). The patternUnits attribute controls whether the tile size is in user space or object bounding-box coordinates. Patterns are useful for hatching, dots, and textures without importing raster images.

More SVG Snippets