<svg class="logo" view-box="0 0 55 40" width="250" fill="#fff5c3">
  <rect class="logo__rect1" x=" 7%" y="40%" width="6%" height="20%" rx="2%"></rect>
  <rect class="logo__rect2" x="17%" y="40%" width="6%" height="20%" rx="2%"></rect>
  <rect class="logo__rect3" x="27%" y="40%" width="6%" height="20%" rx="2%"></rect>
  <rect class="logo__rect4" x="37%" y="40%" width="6%" height="20%" rx="2%"></rect>
  <rect class="logo__rect5" x="47%" y="40%" width="6%" height="20%" rx="2%"></rect>
  <rect class="logo__rect6" x="57%" y="40%" width="6%" height="20%" rx="2%"></rect>
  <rect class="logo__rect7" x="67%" y="40%" width="6%" height="20%" rx="2%"></rect>
  <rect class="logo__rect8" x="77%" y="40%" width="6%" height="20%" rx="2%"></rect>
  <rect class="logo__rect9" x="87%" y="40%" width="6%" height="20%" rx="2%"></rect>
</svg>

body {
  background: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

rect {
  animation: waves 0.6s linear infinite alternate both;
  animation-play-state: paused;
}

.logo rect:nth-child(4n + 1) {
  animation-delay: 0s;
}

.logo rect:nth-child(4n + 2) {
  animation-delay: -0.4s;
}

.logo rect:nth-child(4n + 3) {
  animation-delay: -0.6s;
}

.logo rect:nth-child(4n + 4) {
  animation-delay: -0.4s;
}

.logo:hover rect {
  animation-play-state: running;
}

@keyframes waves {
  0% {
    height: 20%;
    y: 40%;
  }
  100% {
    height: 60%;
    y: 20%;
  }
}