Wave divider

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/backgrounds/wave-divider.html
  Desc   : Animated layered wave section divider
  ============================================================
-->
<div class="sg-wave-divider" style="--sg-color:#7F77DD; --sg-size:110px; --sg-duration:7s;">
  <svg viewBox="0 0 1200 120" preserveAspectRatio="none" aria-hidden="true" focusable="false">
    <path d="M0 60 c150 -38 450 38 600 0 c150 -38 450 38 600 0 c150 -38 450 38 600 0 V120 H0 Z" />
    <path d="M0 60 c150 -38 450 38 600 0 c150 -38 450 38 600 0 c150 -38 450 38 600 0 V120 H0 Z" />
    <path d="M0 60 c150 -38 450 38 600 0 c150 -38 450 38 600 0 c150 -38 450 38 600 0 V120 H0 Z" />
  </svg>
</div>
<style>
  .sg-wave-divider {
    width: 100%;
    min-width: 260px;
    height: var(--sg-size);
    overflow: hidden;
  }
  .sg-wave-divider svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-wave-divider path {
    fill: var(--sg-color);
    animation: sg-wave-divider-roll var(--sg-duration) linear infinite;
  }
  .sg-wave-divider path:nth-of-type(1) {
    opacity: 0.25;
    transform: translateY(-14px);
    animation-duration: calc(var(--sg-duration) * 2.2);
  }
  .sg-wave-divider path:nth-of-type(2) {
    opacity: 0.5;
    transform: translateY(-7px);
    animation-duration: calc(var(--sg-duration) * 1.5);
  }
  @keyframes sg-wave-divider-roll {
    from { translate: 0 0; }
    to   { translate: -600px 0; }
  }
</style>