Try it Yourself: SVG Patterns

SVG Patterns

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <pattern id='dots' patternUnits='userSpaceOnUse' width='20' height='20'>
      <rect width='20' height='20' fill='#eef3f8'/>
      <circle cx='10' cy='10' r='3' fill='#4f9dde'/>
    </pattern>
  </defs>
  <rect x='0' y='0' width='200' height='200' fill='url(#dots)'/>
</svg>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <pattern id='dots' patternUnits='userSpaceOnUse' width='20' height='20'>
      <rect width='20' height='20' fill='#eef3f8'/>
      <circle cx='10' cy='10' r='3' fill='#4f9dde'/>
    </pattern>
  </defs>
  <rect x='0' y='0' width='200' height='200' fill='url(#dots)'/>
</svg>

</body>
</html>