How to Use SVG Patterns

<svg>
    <defs>
          <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse">
              <circle cx="20" cy="20" r="20” fill= "#64bee3" />
          </pattern>
    </defs>
    <rect x="10" y="10" width="200" height="200"
    stroke= "#333333" stroke-width="2" fill="url(#basicPattern)" />
</svg>

SVG patterns provide for very unique design opportunities. We are essentially defining a canvas within a target shape or text, which is then repeated (or tiled) throughout, enabling more detailed design outside of solid color fills and strokes.

The code above yields the following result:

How to Use SVG Patterns →