<div class="Ocean">
  
  <svg class="Wave" viewBox="0 0 12960 1120">
    
    <path d="M9720,320C8100,320,8100,0,6480,0S4860,320,3240,320,1620,0,0,0V1120H12960V0C11340,0,11340,320,9720,320Z">
      
        <animate
            dur="5s"
            repeatCount="indefinite"
            attributeName="d"
            values="
              M9720,320C8100,320,8100,0,6480,0S4860,320,3240,320,1620,0,0,0V1120H12960V0C11340,0,11340,320,9720,320Z;
              M9720,0C8100,0,8100,319,6480,319S4860,0,3240,0,1620,320,0,320v800H12960V320C11340,320,11340,0,9720,0Z;
              M9720,320C8100,320,8100,0,6480,0S4860,320,3240,320,1620,0,0,0V1120H12960V0C11340,0,11340,320,9720,320Z
            "/>
      
    </path>
    
  </svg>
  
</div>

body {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.Ocean {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 600px;
  height: 400px;
  background-color: #B3E5FC;
  overflow: hidden;
}

.Wave {
  width: 1200px;
  animation-name: swell;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  fill: #4FC3F7;
}

@keyframes swell {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}