- let n = 12;
- let p = n*n;

body(style=`--n: ${n}`)
  style
    - for(let i = 0; i < n; i++)
      | .tile:nth-of-type(#{n}n + #{i + 1}) { --i: #{i} }
      | .tile:nth-of-type(n + #{n*i + 1}) { --j: #{i} }
  while p--
    .tile

$t: 1s;

body, div { display: grid }

body {
  --l: clamp(2em, 5vmin, 8em);
  grid-gap: 2px;
  grid-template-columns: repeat(var(--n), var(--l));
  place-content: center;
  margin: 0;
  min-height: 100vh;
  background: #222
}

.tile {
  --m: calc(.5*(var(--n) - 1));
  --abs-i: max(var(--m) - var(--i), var(--i) - var(--m));
  --abs-j: max(var(--m) - var(--j), var(--j) - var(--m));
  height: var(--l);
  
  &::before, &::after {
    --i: 0;
    --not-i: calc(1 - var(--i));
    --sgn-i: calc(2*var(--i) - 1);
    grid-area: 1/ 1;
    transform-origin: calc(var(--not-i)*100%) calc(var(--i)*100%);
    background: 
      linear-gradient(calc(var(--i)*.5turn - 45deg), 
          transparent calc(50% - 1px), 
          hsl(0, 0%, calc(65% - var(--sgn-i)*8%)) 50%);
    animation: s $t ease-in-out infinite alternate;
    animation-delay: 
      calc(((var(--abs-i) + var(--abs-j))/var(--m) - 2)*#{$t});
    content: ''
  }
  
  &::after { --i: 1 }
}

@keyframes s { to { transform: scale(0) } }