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 rgba(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))));
}
.layer: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 {
  -webkit-animation: cycle 6s linear infinite;
          animation: cycle 6s linear infinite;
  -webkit-animation-delay: calc(0.2s * var(--i)), calc(-1s * var(--i));
          animation-delay: calc(0.2s * var(--i)), calc(-1s * var(--i));
}
@-webkit-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);
  }
}
@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);
  }
}