Utilizing a combination of SVG and CSS code, I am attempting to animate the fill level of an SVG shape.
.st0 {
fill: none;
stroke: #000000;
stroke-width: 4;
stroke-miterlimit: 5;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 5;
}
#logo2 {
width: 150px !important;
height: 150px !important;
position: relative;
margin-top: -100px;
}
#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
z-index: -1;
margin-bottom: -50px;
}
#banner .fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
}
@keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
@keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}<div>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
</div>I have been unable to adjust the height of the "water level" animation as desired. My goal is to be able to change the height of the animation using a CSS class to achieve different fill levels such as 75% or 25%. However, my attempts to alter the height via CSS have not been successful and are being overlooked.