<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG wave animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="tutorial-link">
    <h1>Do you want to know how to make it work?</h1>
    <h2><a href="https://dev.to/theliquidcharcoal/pure-html-animation-animate-svg-with-animate-2a5m" target="_blank">Click Here to go to Tutorial.</a></h2>
  </div>
  <!-- Wave SVG Animation -->
  <div class="waves">
    <svg width="100%" height="200px" fill="none" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#00B4DB" />
        <stop offset="50%" stop-color="#224488" />
        <stop offset="100%" stop-color="#0083B0" />
      </linearGradient>
      <path 
        fill="url(#grad1)" 
        d="
          M0 67
          C 273,183
            822,-40
            1920.00,106 
          
          V 359 
          H 0 
          V 67
          Z">
        <animate 
          repeatCount="indefinite" 
          fill="url(#grad1)" 
          attributeName="d" 
          dur="15s"
          attributeType="XML"
          values="
            M0 77 
            C 473,283
              822,-40
              1920,116 
            
            V 359 
            H 0 
            V 67 
            Z; 

            M0 77 
            C 473,-40
              1222,283
              1920,136 
            
            V 359 
            H 0 
            V 67 
            Z; 

            M0 77 
            C 973,260
              1722,-53
              1920,120 
            
            V 359 
            H 0 
            V 67 
            Z; 

            M0 77 
            C 473,283
              822,-40
              1920,116 
            
            V 359 
            H 0 
            V 67 
            Z
            ">
        </animate>
      </path>
    </svg>
  </div>
  
</body>
</html>
html{
  background: #1d1d22;
  height: 100vh;
}
/* div{
  --bg: radial-gradient(#000000 67%, rgba(0, 0, 0, 0) 68%);
  background: linear-gradient(#ff1493 calc(50% - 13em), #ffff00 calc(50% + 13em));
} */
body{
  height: 100%;
  margin: 0;
}
div.waves{
  width: 100%;
  bottom: 0;
  /*height: 100%;*/
  position: absolute;
  z-index: 99;
}
.tutorial-link{
  font-family: sans-serif;
  text-align: center;
  color: #f3f3f3;
}
.tutorial-link h2{
  background: linear-gradient(90deg, #00b4db 0%, #224488 50%, #0083b0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  
}
.tutorial-link a{
  text-decoration: none;
  background: linear-gradient(90deg, #00b4db 0%, #224488 50%, #0083b0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  
}

svg{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  animation-name: move-left;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.spacer{
  height: 100px;
  width: 100%;
}

@keyframes example {
  0%   {
    left:0px;
    top:0px;}
  
  50%  {
    left:-2000px;
    top:200px;}
  
  100% {
    left:0px; 
    top:0px;}
}


//No JS Needed 
// LOL

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.