Skip to content
SVG

Patterns

Tileable fills defined in defs.

#pattern#tile#fill

Code

svg
<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>
All snippets