html {
  --s: 100px; /* control the size */
  --c1: #C3CCAF;
  --c2: #67434F;
  
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: var(--_s) conic-gradient(at 40% 40%,#0000 75%,var(--c1) 0);
  --_p: var(--_s) conic-gradient(at 20% 20%,#0000 75%,var(--c2) 0);
  background:
    calc( .9*var(--s)) calc( .9*var(--s))/var(--_p),
    calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
    calc( .7*var(--s)) calc( .7*var(--s))/var(--_g),
    calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
    conic-gradient(from 90deg at 20% 20%,var(--c2) 25%,var(--c1) 0) 
     0 0/var(--s) var(--s);
  animation: m 3s infinite;
}
@keyframes m {
  0% {
   background-position: 
    calc( .9*var(--s)) calc( .9*var(--s)),
    calc(-.1*var(--s)) calc(-.1*var(--s)),
    calc( .7*var(--s)) calc( .7*var(--s)),
    calc(-.3*var(--s)) calc(-.3*var(--s)),0 0
  }
  25% {
   background-position: 
    calc(1.9*var(--s)) calc( .9*var(--s)),
    calc(-1.1*var(--s)) calc(-.1*var(--s)),
    calc(1.7*var(--s)) calc( .7*var(--s)),
    calc(-1.3*var(--s)) calc(-.3*var(--s)),0 0
  }
  50% {
   background-position: 
    calc(1.9*var(--s)) calc(-.1*var(--s)),
    calc(-1.1*var(--s)) calc( .9*var(--s)),
    calc(1.7*var(--s)) calc(-.3*var(--s)),
    calc(-1.3*var(--s)) calc( .7*var(--s)),0 0
  }
  75% {
   background-position: 
    calc(2.9*var(--s)) calc(-.1*var(--s)),
    calc(-2.1*var(--s)) calc( .9*var(--s)),
    calc(2.7*var(--s)) calc(-.3*var(--s)),
    calc(-2.3*var(--s)) calc( .7*var(--s)),0 0
  }
  100% {
   background-position: 
    calc(2.9*var(--s)) calc(-1.1*var(--s)),
    calc(-2.1*var(--s)) calc(1.9*var(--s)),
    calc(2.7*var(--s)) calc(-1.3*var(--s)),
    calc(-2.3*var(--s)) calc(1.7*var(--s)),0 0
  }
}