@keyframes moveDot {
  0% {
    background-position: calc(var(--tile) * 4.6) calc(var(--tile2) / -2), 0 0, 0 0, 0 0, 0 0, 0 0;
  }  
  100% {
    background-position: calc(var(--tile) * -5.2) calc(var(--tile2) / -2), 0 0, 0 0, 0 0, 0 0, 0 0;
  }  
}

:root {
  --size: 90em;
  --tile: calc(var(--size) / 14);
  --tile2: calc(var(--tile) / 2);
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: #777;
  font-size: 1vmin;
  
  &::before,
  &::after {
    content: "";
    --c: radial-gradient(#0000 0 0);
    width: var(--size);
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background:
      var(--c),
      linear-gradient(#0000 var(--tile2), #777 0) 0 0 / var(--tile) var(--tile),
      linear-gradient(90deg, #0000 var(--tile2), #777 0) 0 0 / var(--tile) var(--tile),
      conic-gradient(at 1px 1px, #000 25%, #0000 0 50%, #000 0) 0 0 / var(--tile) var(--tile),
      
      conic-gradient(at calc(var(--tile2) - 1px) calc(var(--tile2) - 1px), #fff 75%, #0000 0) 0 0 / var(--tile) var(--tile);
  }
  
  &::after {
    --c: radial-gradient(#1fb 0.5em, #0000 calc(0.5em + 1px)) calc(var(--tile) * -5.2) calc(var(--tile2) / -2);
    scale: 1 -1;
    transform: translate(0, var(--tile2));
    clip-path: polygon(33% 13%, 62% 13%, 62% 20%, 70% 20%, 69% 27%, 77% 27%, 77% 34%, 83% 34%, 84% 63%, 77% 63%, 76% 70%, 69% 70%, 70% 77%, 63% 77%, 62% 84%, 33% 84%, 34% 77%, 27% 77%, 27% 70%, 20% 70%, 19% 63%, 12% 63%, 12% 34%, 19% 34%, 19% 27%, 26% 27%, 26% 20%, 33% 20%);
    animation: moveDot 2s alternate linear infinite;
  }
}