SVG Patterns

The SVG <pattern></pattern> attribute allows us to define patterns inside of our SVG markup and use those patterns as a fill. The basic process for patterns goes something like:

  • Define a <pattern></pattern> inside of the SVG
  • Define the shapes inside of the pattern
  • Use the shapes
  • Create a new shape and fill it with the pattern