SOURCE

<div class="art" style="--total:20">
  <div class="layer" style="--i:1"></div>
  <div class="layer" style="--i:2"></div>
  <div class="layer" style="--i:3"></div>
  <div class="layer" style="--i:4"></div>
  <div class="layer" style="--i:5"></div>
  <div class="layer" style="--i:6"></div>
  <div class="layer" style="--i:7"></div>
  <div class="layer" style="--i:8"></div>
  <div class="layer" style="--i:9"></div>
  <div class="layer" style="--i:10"></div>
  <div class="layer" style="--i:11"></div>
  <div class="layer" style="--i:12"></div>
  <div class="layer" style="--i:13"></div>
  <div class="layer" style="--i:14"></div>
  <div class="layer" style="--i:15"></div>
  <div class="layer" style="--i:16"></div>
  <div class="layer" style="--i:17"></div>
  <div class="layer" style="--i:18"></div>
  <div class="layer" style="--i:19"></div>
  <div class="layer" style="--i:20"></div>
</div>

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.art {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 70vmin;
  height: 90vmin;
  background: #ccc;
  font-size: 4vmin;
  padding: 1em;
  box-shadow: 0 7px 15px hsla(0, 0, 0, 0.25);
}

.layer {
  --p: calc(var(--i) / var(--total));

  grid-area: 1 / 1;
  border: solid 1px hsla(0, 0%, 100%, calc(0.9 * var(--p)));
  background: hsla(50, 90%, calc(5% + (var(--p) * 40%)), 0.25);
  mix-blend-mode: hard-light;

  --half-total: calc(var(--total) / 2);
  --a: var(--i) / var(--half-total);

  --pow-a: calc(1 - var(--a));
  --pow: calc(1 - (var(--pow-a) * var(--pow-a)));
  /* A "EaseOutQuad"-like calculation to spread the sizing in a pleasing fashion */

  width: calc(55% + (50% * (1 - var(--pow))));
  height: calc(10% + (65% * (1 - var(--pow))));

  &:nth-child(n + 10) {
    --a: calc((((var(--i) - var(--half-total))) / var(--half-total)));
    width: calc(100% - (70% * var(--pow)));
    height: calc(70% + (30% * (var(--pow))));
  }
}

.layer {
  animation: cycle 6s linear infinite; 
  /* , cycle-size 12s ease-in-out infinite; */
  animation-delay: calc(0.2s * var(--i)), calc(-1s * var(--i))
}
  /* @keyframes cycle-size {
   0%, 10%, 90%, 100% {
     width: calc(55% + (50% * (1 - var(--pow))));
     height: calc(10% + (65% * (1 - var(--pow))));
   }
   45%, 50% {
     width: calc(100% - (70% * var(--pow)));
     height: calc(70% + (30% * (var(--pow))));
   }
  } */
  @keyframes cycle {
    0%,
    10%,
    90%,
    100% {
      background: hsla(50, 90%, calc(5% + (var(--p) * 40%)), 0.25);
    }

    25%,
    75% {
      background: hsla(180, 90%, calc(5% + (var(--p) * 40%)), 0.25);
    }

    45%,
    55% {
      background: hsla(350, 90%, calc(5% + (var(--p) * 40%)), 0.25);
    }
  }