SVG Animation Example Backgrounds Animated Wave

<!doctype html>
<title>Example</title>
<style>
  .wave-bg {
    background: linear-gradient(to bottom, #001f3f, #003366);
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
  }
  .wave-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%; /* Double width for seamless loop */
    height: 100%;
  }
  .wave-path {
    animation: moveWave 10s linear infinite;
  }
  .wave-path-slow {
    animation: moveWave 15s linear infinite;
  }
  @keyframes moveWave {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
</style>