Css3 animations waves effect - css

Question

I have created an container that if filling up and I want to apply to that some "waves animated effect" and I'm a bit stuck because I am not sure how to do it:
Does anyone cand help me with those waves effecct animations ?
body {
background-color: #015871;
}
.container {
position: relative;
width: 700px;
height: 300px;
margin: 100px auto;
}
.shape {
width: 200px;
height: 200px;
border-radius: 50%;
border-top-right-radius: 0;
transform: rotate(-45deg);
float: left;
margin-top: 50px;
margin-left: 20px;
border: 5px solid #fff;
overflow: hidden;
position: relative;
}
.frame {
position: absolute;
transform: rotate(225deg);
background-color: #00eaff;
bottom: -80px;
left: -80px;
right: 0;
height: 10px;
width: 200%;
animation: fill-up 1s ease infinite;
}
#keyframes fill-up {
to {
height: 300px;
}
}
<div class="container">
<div class="shape">
<div class="frame" />
</div>
</div>
working example: https://codesandbox.io/s/vigorous-keldysh-uw2po?file=/src/styles.css:81-720

Answer 1

Improved your code with inner element .wave with two rotating blocks. No JavaScript, no svg. Switch overflow hidden off to see how simple it works.
body {
background-color: #015871;
}
.container {
position: relative;
width: 700px;
height: 300px;
margin: 100px auto;
}
.shape {
width: 200px;
height: 200px;
border-radius: 50%;
border-top-right-radius: 0;
transform: rotate(-45deg);
float: left;
margin-top: 50px;
margin-left: 20px;
border: 5px solid #fff;
overflow: hidden;
position: relative;
}
.frame {
position: absolute;
transform: rotate(45deg);
background-color: rgba(0, 234, 255, 0.5);
bottom: -8px;
left: 15px;
right: 0;
height: 245px;
width: 200px;
}
.wave {
position: absolute;
top: 50%;
left: 0;
width: 200%;
height: 200%;
transform: translate(-25%, 0);
background: #4973ff;
animation: fill-up 10s ease infinite;
}
#keyframes fill-up {
to {
top: -60%;
}
}
.wave:before,
.wave:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background: #000;
}
.wave:before {
border-radius: 45%;
background: rgba(1, 88, 113, 1);
animation: animate 3s linear infinite;
}
.wave:after {
border-radius: 40%;
background: rgba(1, 88, 113, 0.5);
animation: animate 3s linear infinite;
}
#keyframes animate {
0% {
transform: translate(-50%, -75%) rotate(0deg);
}
100% {
transform: translate(-50%, -75%) rotate(360deg);
}
}
<div class="container">
<div class="shape">
<div class="frame">
<div class="wave">
</div>
</div>
</div>
</div>
Working example https://codepen.io/focus-style/pen/oNbxVBX