<div class="dots">
  <h1>Svg Dots as background</h1>
</div>

<!--
The svg below is run through this encoder to get the background data:
https://yoksel.github.io/url-encoder/
<svg>
  <circle cx="10" cy="5" r="5" stroke="red" fill="red" />
  <circle cx="25" cy="5" r="5" stroke="blue" fill="blue" />
  <circle cx="40" cy="5" r="5" stroke="green" fill="green" />
  <circle cx="10" cy="25" r="5" stroke="red" fill="red" />
  <circle cx="25" cy="25" r="5" stroke="blue" fill="blue" />
  <circle cx="40" cy="25" r="5" stroke="green" fill="green" />
  <circle cx="10" cy="45" r="5" stroke="red" fill="red" />
  <circle cx="25" cy="45" r="5" stroke="blue" fill="blue" />
  <circle cx="40" cy="45" r="5" stroke="green" fill="green" />
  <circle cx="55" cy="45" r="5" stroke="teal" fill="teal" />
</svg>
-->

.dots {
  display: table;
  margin: auto;
}
.dots h1 {
  margin: 0 auto;
  padding: 1rem 5rem;
}
.dots {
  min-height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='5' r='5' stroke='red' fill='red' /%3E%3Ccircle cx='25' cy='5' r='5' stroke='blue' fill='blue' /%3E%3Ccircle cx='40' cy='5' r='5' stroke='green' fill='green' /%3E%3Ccircle cx='10' cy='25' r='5' stroke='red' fill='red' /%3E%3Ccircle cx='25' cy='25' r='5' stroke='blue' fill='blue' /%3E%3Ccircle cx='40' cy='25' r='5' stroke='green' fill='green' /%3E%3Ccircle cx='10' cy='45' r='5' stroke='red' fill='red' /%3E%3Ccircle cx='25' cy='45' r='5' stroke='blue' fill='blue' /%3E%3Ccircle cx='40' cy='45' r='5' stroke='green' fill='green' /%3E%3Ccircle cx='55' cy='45' r='5' stroke='teal' fill='teal' /%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='5' r='5' stroke='red' fill='red' /%3E%3Ccircle cx='25' cy='5' r='5' stroke='blue' fill='blue' /%3E%3Ccircle cx='40' cy='5' r='5' stroke='green' fill='green' /%3E%3Ccircle cx='10' cy='25' r='5' stroke='red' fill='red' /%3E%3Ccircle cx='25' cy='25' r='5' stroke='blue' fill='blue' /%3E%3Ccircle cx='40' cy='25' r='5' stroke='green' fill='green' /%3E%3Ccircle cx='10' cy='45' r='5' stroke='red' fill='red' /%3E%3Ccircle cx='25' cy='45' r='5' stroke='blue' fill='blue' /%3E%3Ccircle cx='40' cy='45' r='5' stroke='green' fill='green' /%3E%3Ccircle cx='55' cy='45' r='5' stroke='teal' fill='teal' /%3E%3C/svg%3E");
  background-size: 60px 60px, 60px 60px;
  background-position: 0 50%, 100% 50%;
  background-repeat: no-repeat;
}