assets/footer.svg

<svg viewBox="0 0 115 25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
svg {
  width: 100%;
  position: fixed;
  top: -1px;
  transform: rotate(360deg);
  overflow:visible;
}
.wave {
    animation: wave 5s linear;
    animation-iteration-count: infinite;  
    fill: #65F8B0;
}
#wave2 {
  animation-duration: 10s;
  animation-direction: reverse;
  opacity: .9;
}
#wave3 {
  animation-duration: 5s;
  opacity:.6;
}
@keyframes wave {
  0% {
        transform: translateX(-0%);
      }
  10% {
        transform: translateX(-10%);
      }
  20% {
        transform: translateX(-20%);
      }
  30% {
        transform: translateX(-30%);
      }
  40% {
        transform: translateX(-40%);
      }
  50% {
        transform: translateX(-50%);
      }
  60% {
        transform: translateX(-60%);
      }
  70% {
        transform: translateX(-70%);
      }
  80%{
        transform: translateX(-80%);
      }
  90%{
        transform: translateX(-90%);
      }
  100%{
        transform: translateX(-100%);
      }
    }
}
</style>

<defs> 
  <filter id="anim">
    <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"/>
    <feColorMatrix in="blur" mode="matrix" values="           1 0 0 0 0             0 1 0 0 0             0 0 1 0 0             0 0 0 13 -9" result="anim"/>
    <xfeBlend in="SourceGraphic" in2="anim"/>
  </filter>
  <path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z"/>
</defs> 
<use id="wave2" class="wave" xlink:href="#wave" x="0" y="0"/>
<use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2"/> 
</svg>