html {
  --s: 80px;
  
  --_g: radial-gradient(#4d4d4d 45%,#0000 46%);
  --_l: radial-gradient(#ffffff 15%,#0000 16%);
  background: var(--_l),var(--_l),var(--_g),var(--_g);
  background-position: 0 0,var(--s) var(--s);
  background-size: calc(2*var(--s)) calc(2*var(--s));
  animation: 
    x 2s cubic-bezier(0.5,92,0.5,-92) infinite, 
    y 2s cubic-bezier(0.5,92,0.5,-92) infinite -.5s;
  
  /* 92 ~ var(--s)/(1px * 3 * 0.289) 
     https://css-tricks.com/advanced-css-animation-using-cubic-bezier/
  */
}

@keyframes x {
  to {
    background-position-x: 1px, calc(var(--s) - 1px),0,var(--s);
  }
}
@keyframes y {
  to {
    background-position-y: 1px, calc(var(--s) - 1px),0,var(--s);
  }
}