SVG: Background 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG: Background</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #111; }
  svg { width: 100vw; height: 100vh; display: block; }

  @keyframes spin-cw  { to { transform: rotate(360deg);  } }
  @keyframes spin-ccw { to { transform: rotate(-360deg); } }
  @keyframes pulse    { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

  .q-tl { animation: spin-cw   9s linear infinite; transform-origin: 10px 10px; transform-box: fill-box; }
  .q-tr { animation: spin-ccw  9s linear infinite; transform-origin:  0px 10px; transform-box: fill-box; }
  .q-bl { animation: spin-ccw 13s linear infinite; transform-origin: 10px  0px; transform-box: fill-box; }
  .q-br { animation: spin-cw  13s linear infinite; transform-origin:  0px  0px; transform-box: fill-box; }
  .pulse { animation: pulse 5s ease-in-out infinite; }
</style>
</head>
<body>
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<defs>

  <clipPath id="c-tl"><rect x="0"  y="0"  width="10" height="10"/></clipPath>
  <clipPath id="c-tr"><rect x="10" y="0"  width="10" height="10"/></clipPath>
  <clipPath id="c-bl"><rect x="0"  y="10" width="10" height="10"/></clipPath>
  <clipPath id="c-br"><rect x="10" y="10" width="10" height="10"/></clipPath>

  <symbol id="tile" viewBox="0 0 20 20" overflow="hidden">
    <rect width="20" height="20" fill="#111"/>

    <g class="q-tl" clip-path="url(#c-tl)" stroke="#f9df90" stroke-width="0.6" fill="#111">
      <circle cx="10" cy="10" r="2"/>
      <circle cx="10" cy="10" r="4"/>
      <circle cx="10" cy="10" r="6"/>
      <circle cx="10" cy="10" r="8"/>
      <circle cx="10" cy="10" r="10"/>
    </g>

    <g class="q-tr" clip-path="url(#c-tr)" stroke="#f9df90" stroke-width="0.6" fill="#111">
      <circle cx="10" cy="10" r="2"/>
      <circle cx="10" cy="10" r="4"/>
      <circle cx="10" cy="10" r="6"/>
      <circle cx="10" cy="10" r="8"/>
      <circle cx="10" cy="10" r="10"/>
    </g>

    <g class="q-bl" clip-path="url(#c-bl)" stroke="#f9df90" stroke-width="0.6" fill="#111">
      <circle cx="10" cy="10" r="2"/>
      <circle cx="10" cy="10" r="4"/>
      <circle cx="10" cy="10" r="6"/>
      <circle cx="10" cy="10" r="8"/>
      <circle cx="10" cy="10" r="10"/>
    </g>

    <g class="q-br" clip-path="url(#c-br)" stroke="#f9df90" stroke-width="0.6" fill="#111">
      <circle cx="10" cy="10" r="2"/>
      <circle cx="10" cy="10" r="4"/>
      <circle cx="10" cy="10" r="6"/>
      <circle cx="10" cy="10" r="8"/>
      <circle cx="10" cy="10" r="10"/>
    </g>
  </symbol>

  <pattern id="pat" viewBox="0 0 20 20" width="5%" height="5%" patternUnits="objectBoundingBox">
    <use href="#tile" width="20" height="20" class="pulse"/>
  </pattern>

</defs>

<rect width="100" height="100" fill="url(#pat)"/>
</svg>
</body>
</html>