SOURCE

<div class="box">



<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 600 100">
	<defs>
		<g id="whole" fill-opacity="0.3" fill="#fff">
			<path id="wave1" opacity="0.2" d="M0,150c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
              c50,50,100,0,100,0v200H0V200z"></path>
			<path id="wave2" opacity="0.4" d="M0,150c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
              c50,50,100,0,100,0v200H0V200z"></path>
			<!-- <path id="wave3" opacity="0.6" d="M0,150c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
             c50,50,100,0,100,0v200H0V200z"></path> -->
		</g>
	</defs>
	<use xlink:href="#whole"></use>
</svg>
</div>

 @keyframes move1 {
     0% {
         transform: translateX(-500px) scaleX(2.5);
     }
     100% {
         transform: translateX(0) scaleX(2.5);
     }
 }
 
 @keyframes move2 {
     0% {
         transform: translateX(-600px) scaleX(3);
     }
     100% {
         transform: translateX(0) scaleX(3);
     }
 }
 
 @keyframes move3 {
     0% {
         transform: translateX(-800px) scaleX(4);
     }
     100% {
         transform: translateX(0) scaleX(4);
     }
 }
 
 #wave1 {
     animation: move1 3s linear infinite;
 }
 
 #wave2 {
     animation: move2 2s linear infinite;
 }
 
 #wave3 {
     animation: move3 4s linear infinite;
 }
 .box{
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: blue;
     /* position: relative; */
 }
 .box svg{
     width: 100%;
     height: 100%;
     /* position: absolute;
     bottom: 0;
     left: 0; */
     border-radius: 50%;
 }