Drifting dots

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/backgrounds/dots-drift.html
  Desc   : Subtle drifting dot-grid pattern background
  ============================================================
-->
<div class="sg-dots-drift" style="--sg-color:#7F77DD; --sg-size:150px; --sg-duration:8s;">
  <svg viewBox="0 0 280 140" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">
    <defs>
      <pattern id="sg-dots-drift-tile" width="28" height="28" patternUnits="userSpaceOnUse">
        <circle cx="4" cy="4" r="2.2" />
      </pattern>
    </defs>
    <rect class="sg-dots-drift-a" x="-28" y="-28" width="340" height="200" fill="url(#sg-dots-drift-tile)" />
    <rect class="sg-dots-drift-b" x="-28" y="-28" width="340" height="200" fill="url(#sg-dots-drift-tile)" />
  </svg>
</div>
<style>
  .sg-dots-drift {
    width: 100%;
    min-width: 240px;
    height: var(--sg-size);
    overflow: hidden;
    border-radius: 8px;
  }
  .sg-dots-drift svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-dots-drift circle {
    fill: var(--sg-color);
  }
  .sg-dots-drift-a {
    opacity: 0.35;
    animation: sg-dots-drift-se var(--sg-duration) linear infinite;
  }
  .sg-dots-drift-b {
    opacity: 0.18;
    animation: sg-dots-drift-nw calc(var(--sg-duration) * 1.7) linear infinite;
  }
  @keyframes sg-dots-drift-se {
    from { translate: 0 0; }
    to   { translate: 28px 28px; }
  }
  @keyframes sg-dots-drift-nw {
    from { translate: 14px 14px; }
    to   { translate: -14px -14px; }
  }
</style>