"Filling Water" effect with infinite repeat wrapping - css

Question

I've been trying to achieve the effect seen here for one wave in a circle:
http://www.jquery-az.com/css/demo.php?ex=131.0_1
Unfortunately, I've been unable to get the animation to repeat smoothly with my own svg, seen here: http://jsbin.com/diserekigo/1/edit?html,css,output. You'll also notice that the bottom "rectangle" part isn't filled either.
My css is as follows:
.circle {
border-radius: 100%;
border: 1px solid black;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
perspective: 1px;
}
.liquid {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
-webkit-transform: translate(0, 80%);
transform: translate(0, 80%);
}
.wave {
left: 0;
width: 400%;
position: absolute;
bottom: 100%;
margin-bottom: -1px;
-webkit-animation: wave-front .7s infinite linear;
animation: wave-front 0.7s infinite linear;
}
#-webkit-keyframes wave-front {
100% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
}
#keyframes wave-front {
100% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
}
How can I improve the repeating behavior, as well as make the wave fill up the entire space beneath it?

Answer 1

You're missing a lot from the original demo. Why not just copy and paste and make whatever local changes to the size and position you wanted? Most of your issues are a result of not having all the SVG elements - the original demo has 3, not just 1. I've added them into your jsbin to get it to work:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="display: none;">
<symbol id="wave">
<path d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
<path d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
<path d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
<path d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>
</symbol>
</svg>
<div class="circle">
<div class="liquid"></div>
<div id="water" class="water">
<svg viewBox="0 0 560 20" class="water_wave water_wave_back">
<use xlink:href="#wave"></use>
</svg>
<svg viewBox="0 0 560 20" class="water_wave water_wave_front">
<use xlink:href="#wave"></use>
</svg>
</div>
</div>
You also need JavaScript to get the water to fill.
http://jsbin.com/pinowufeqe/edit?html,css,js,output