<svg width="414" height="545" viewBox="0 0 414 545" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#e91e63" />
      <stop offset="100%" stop-color="#03a9f4" />
    </linearGradient>
    <symbol id="wave" width="414" height="545" overflow="visible">
      <path d="M467.762 293.552C467.762 392.36 408.438 494.996 327.434 536.146C289.791 555.286 238.806 536.146 193.063 536.146C155.896 536.146 117.062 543.084 85.1365 529.208C-6.82698 488.776 -53.7617 400.973 -53.7617 293.791C-53.7617 148.091 47.9699 31.8177 125.4 5.73999C177.1 -11.7249 241.665 17.2237 292.412 35.8849C319.81 45.9331 353.641 38.995 363.648 44.4977C386.519 56.6992 383.422 83.9731 404.388 111.965C415.586 127.037 425.115 143.784 432.501 161.967C436.79 169.862 441.078 177.757 444.652 185.891C459.661 218.907 467.762 255.272 467.762 293.552Z"/>
    </symbol>
  </defs>
  <g stroke="url(#grad)">
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
    <use href="#wave"></use>
  </g>
</svg>

body {
  background-color: #000;
}

svg {
  overflow: visible;
}

svg use {
  transform-origin: 50% 50%;
  transform-box: view-box;
  stroke-width: 1px;
}

$total: 15;

@for $i from 1 through $total {
  $duration: 3s;
  $stagger: 0.35;
  $f: ($total - $i) / ($total - 1);
  $s-max: $f * 0.75 + 0.25;
  $s-min: $s-max * ($f * 0.5 + 0.5);
  
  use:nth-child(#{$i}) {
    animation: beat-#{$i} $duration infinite;
    animation-delay: -$duration / $total * $i * $stagger;
  }
  
  @keyframes beat-#{$i} {
    0% {
      transform: scale($s-max);
      stroke-opacity: $f * 0.75 + 0.25;
      stroke-width: (1 - $s-max) * 12px + 1px;
      animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
    }
    50% {
      transform: scale($s-min);
      stroke-opacity: $f * 0.75 + 0.05;
      stroke-width: (1 - $s-min) * 12px + 1px;
      animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    100% {
      transform: scale($s-max);
      stroke-opacity: $f * 0.75 + 0.25;
      stroke-width: (1 - $s-max) * 12px + 1px;
    }
  }
}