<section class="wrapper">
  <div class="pl pl--01"></div>
  <div class="pl pl--02"></div>
  <div class="pl pl--03"></div>
  <div class="pl pl--04"></div>
  <div class="pl pl--05"></div>
  <div class="pl pl--06"></div>
  <div class="pl pl--07"></div>
  <div class="pl pl--08"></div>
  <div class="pl pl--09"></div>
  <div class="pl pl--10"></div>
  <div class="pl pl--11"></div>
  <div class="pl pl--12"></div>
  <div class="pl pl--13"></div>
  <div class="pl pl--14"></div>
  <div class="pl pl--15"></div>
  <div class="pl pl--16"></div>
  <div class="pl pl--17"></div>
  <div class="pl pl--18"></div>
</section>
<div class="castShadow"></div>

$cat-gray: #b7b6be;
$cat-gray-dark: #787681;
$cat-gray-light: #c8c6d3;
$cat-gray-white: #eee7e7;

$crab-red: #e64d2d;
$crab-red-light: #d76644;
$crab-red-dark: #a93f32;

html,
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #bbe3e3;
}

.wrapper {
  position: relative;
  width: 50vw;
  height: 50vw;
  max-width: 100vh;
  max-height: 100vh;
}

.pl {
  width: 100%;
  height: 100%;
  position: absolute;

  &:hover {
    opacity: 0.5;
  }
}

.castShadow {
  height: 40px;
  width: 320px;
  background-color: black;
  filter: blur(10px);
  border-radius: 50%;
  opacity: 0.45;
  animation: animateShadow 3s infinite alternate cubic-bezier(0.93, 0, 0.27, 1);
}

@for $i from 1 to 21 {
  .wrapper .pl:nth-child(#{$i}) {
    animation: transform#{$i}
      3s
      infinite
      alternate
      cubic-bezier(0.93, 0, 0.27, 1);
  }
}
@keyframes transform1 {
  from {
    clip-path: polygon(33.862% 16.402%, 27.513% 21.693%, 26.455% 12.698%);
    background-color: $crab-red-dark;
  }
  to {
    clip-path: polygon(41.267% 13.87%, 44.692% 25.685%, 40.411% 31.507%);
    background-color: $cat-gray-dark;
  }
}
@keyframes transform2 {
  from {
    clip-path: polygon(26.455% 12.698%, 15.873% 29.63%, 29.042% 35.921%);
    background-color: $crab-red-light;
  }
  to {
    clip-path: polygon(41.267% 13.87%, 44.692% 25.685%, 52.397% 25.685%);
    background-color: $cat-gray;
  }
}
@keyframes transform3 {
  from {
    clip-path: polygon(15.873% 29.63%, 14.212% 40.411%, 31.5% 36.815%);
    background-color: $crab-red-light;
  }
  to {
    clip-path: polygon(35.274% 38.356%, 44.692% 25.685%, 56.678% 50.685%);
    background-color: $cat-gray-white;
  }
}
@keyframes transform4 {
  from {
    clip-path: polygon(14.212% 40.411%, 21.164% 46.032%, 38.095% 35.45%);
    background-color: $crab-red;
  }
  to {
    clip-path: polygon(44.692% 25.685%, 56.678% 50.685%, 68.322% 25.685%);
    background-color: $cat-gray;
  }
}
@keyframes transform5 {
  from {
    clip-path: polygon(38.095% 35.45%, 11.64% 51.323%, 41.27% 59.259%);
    background-color: $crab-red;
  }
  to {
    clip-path: polygon(68.322% 25.685%, 56.678% 50.685%, 77.911% 38.356%);
    background-color: $cat-gray-white;
  }
}
@keyframes transform6 {
  from {
    clip-path: polygon(11.64% 51.323%, 38.356% 82.534%, 41.27% 59.259%);
    background-color: $crab-red;
  }
  to {
    clip-path: polygon(71.404% 13.87%, 59.932% 25.685%, 68.322% 25.685%);
    background-color: $cat-gray;
  }
}
@keyframes transform7 {
  from {
    clip-path: polygon(11.64% 51.323%, 19.349% 83.048%, 28.596% 71%);
    background-color: $crab-red-dark;
  }
  to {
    clip-path: polygon(71.404% 13.87%, 68.322% 25.685%, 72.603% 31.164%);
    background-color: $cat-gray-dark;
  }
}
@keyframes transform8 {
  from {
    clip-path: polygon(41.27% 59.259%, 38.356% 82.534%, 62.842% 83.39%);
    background-color: $crab-red;
  }
  to {
    clip-path: polygon(42.466% 42.5%, 48.288% 87.329%, 56.678% 50.685%);
    background-color: $cat-gray-light;
  }
}
@keyframes transform9 {
  from {
    clip-path: polygon(62.842% 83.39%, 59.589% 59.589%, 41.27% 59.259%);
    background-color: $crab-red;
  }
  to {
    clip-path: polygon(56.678% 50.685%, 56.66% 83.904%, 48.288% 87.329%);
    background-color: $cat-gray-light;
  }
}
@keyframes transform10 {
  from {
    clip-path: polygon(41.27% 59.259%, 38.095% 35.45%, 59.589% 59.589%);
    background-color: $crab-red;
  }
  to {
    clip-path: polygon(56.66% 83.904%, 56.678% 50.685%, 64.555% 87.158%);
    background-color: $cat-gray-light;
  }
}
@keyframes transform11 {
  from {
    clip-path: polygon(63.243% 35.243%, 59.589% 59.589%, 38.095% 35.45%);
    background-color: $crab-red;
  }
  to {
    clip-path: polygon(71.377% 42.123%, 64.555% 87.158%, 56.678% 50.685%);
    background-color: $cat-gray-light;
  }
}
@keyframes transform12 {
  from {
    clip-path: polygon(63.243% 35.243%, 59.589% 59.589%, 89.405% 51.784%);
    background-color: $crab-red;
  }
  to {
    clip-path: polygon(56.66% 83.904%, 48.288% 87.329%, 56.66% 87.329%);
    background-color: $cat-gray-white;
  }
}
@keyframes transform13 {
  from {
    clip-path: polygon(59.589% 59.589%, 89.405% 51.784%, 62.842% 83.39%);
    background-color: $crab-red;
  }
  to {
    clip-path: polygon(56.66% 83.904%, 64.555% 87.158%, 56.66% 87.329%);
    background-color: $cat-gray-white;
  }
}
@keyframes transform14 {
  from {
    clip-path: polygon(89.405% 51.892%, 73% 71%, 83.048% 82.919%);
    background-color: $crab-red-dark;
  }
  to {
    clip-path: polygon(42.466% 42.5%, 29.11% 63.527%, 45.205% 62.842%);
    background-color: $cat-gray;
  }
}
@keyframes transform15 {
  from {
    clip-path: polygon(63.243% 35.243%, 79.795% 45.89%, 88.185% 40.753%);
    background-color: $crab-red;
  }
  to {
    clip-path: polygon(29.11% 63.527%, 45.205% 62.842%, 29.11% 78.082%);
    background-color: $cat-gray;
  }
}
@keyframes transform16 {
  from {
    clip-path: polygon(86.815% 29.281%, 69.404% 36.644%, 88.185% 40.753%);
    background-color: $crab-red-light;
  }
  to {
    clip-path: polygon(29.11% 78.082%, 45.205% 62.842%, 41.438% 87.329%);
    background-color: $cat-gray;
  }
}
@keyframes transform17 {
  from {
    clip-path: polygon(86.815% 29.281%, 72.801% 35.25%, 75.342% 12.158%);
    background-color: $crab-red-light;
  }
  to {
    clip-path: polygon(41.438% 87.329%, 45.205% 62.842%, 48.288% 87.329%);
    background-color: $cat-gray;
  }
}
@keyframes transform18 {
  from {
    clip-path: polygon(67.096% 16.438%, 75.342% 12.158%, 74.2% 22.603%);
    background-color: $crab-red-dark;
  }
  to {
    clip-path: polygon(29.11% 78.082%, 16.267% 86.473%, 40.897% 86.644%);
    background-color: $cat-gray-dark;
  }
}

@keyframes animateShadow {
  from {
    width: 30vw;
  }
  to {
    width: 25vw;
  }
}