.caterpillar
  .center

:root {
  --caterpillar-color: #FABEAB;
}

body {
  background: #F4E7CA;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  box-sizing: border-box;
}

.caterpillar {
  position: absolute;
  animation: move 4s ease-in-out infinite;
  filter: drop-shadow(120px 0 0 var(--caterpillar-color)) drop-shadow(120px*2 0 0 var(--caterpillar-color)) drop-shadow(120px*4 0 0 var(--caterpillar-color)) drop-shadow(120px*8 0 0 var(--caterpillar-color)) drop-shadow(120px*-16 0 0 var(--caterpillar-color)) drop-shadow(60px 80px 0 var(--caterpillar-color)) drop-shadow(0 80px*2 0 var(--caterpillar-color)) drop-shadow(0 80px*4 0 var(--caterpillar-color)) drop-shadow(0 80px*8 0 var(--caterpillar-color)) drop-shadow(0 80px*-16 0 var(--caterpillar-color));
  
  &::before {
    content: '';
    position: absolute;
    top: calc(50% - 20px);
    left: 20px;
    width: 10px;
    height: 0;
    border: 10px solid var(--caterpillar-color);
    border-radius: 999px;
    transform: translateX(-100%);
    animation: reach 1s ease-in-out infinite alternate;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: calc(50% - 20px);
    right: 20px;
    width: 10px;
    height: 0;
    border: 10px solid var(--caterpillar-color);
    border-radius: 999px;
    transform: translateX(100%);
    animation: reach 1s ease-in-out infinite alternate;
  }
  
  .center {
    width: 50px;
    height: 80px;
    border: 20px solid var(--caterpillar-color);
    border-radius: 999px;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(50% - 10px),
      0 calc(50% - 10px)
    );

    animation: spring 1s ease-in-out infinite alternate;
  }
}

@keyframes spring {
  0% {
    width: 45px;
    height: 110px;
  }
  
  10% {
    width: 45px;
    height: 110px;
  }
  
  90% {
    width: 60px;
    height: 80px;
  }
  
  100% {
    width: 60px;
    height: 80px;
  }
}

@keyframes reach {
  0% {
    width: 10px;
  }
  
  100% {
    width: 20px;
  }
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  
  2% {
    transform: translateX(0);
  }
  
  23% {
    transform: translateX(30px);
  }
  
  25% {
    transform: translateX(30px);
  }
  
  27% {
    transform: translateX(30px);
  }
  
  48% {
    transform: translateX(60px);
  }
  
  50% {
    transform: translateX(60px);
  }
  
  52% {
    transform: translateX(60px);
  }
  
  73% {
    transform: translateX(90px);
  }
  
  75% {
    transform: translateX(90px);
  }
  
  77% {
    transform: translateX(90px);
  }
  
  98% {
    transform: translateX(120px);
  }
  
  100% {
    transform: translateX(120px);
  }
}