The pattern element

The final paint server we'll look at is the pattern element. pattern allows you to define a small graphic element that you can reference as fill or stroke and tile over an element in a repeating pattern. In this example, we're using a pattern element with a single child polygon element that defines two diagonal lines that combine to create a long pattern:

<svg width="400" height="400" viewBox="0 0 400 400" 
 xmlns="http://www.w3.org/2000/svg">
    <pattern id="pattern-example" width="100" height="100"
      patternUnits="userSpaceOnUse">
    <polygon points="0,50 0,100 50,50 100,100 100,75 50,25 0,75" 
      fill="#000000"></polygon>
    </pattern>
    <rect x="0" y="0" width="400" height="400" fill="url(#pattern-
     example)"></rect>
</svg>

Rendered out in the browser, this creates the following jagged pattern: