Liquid Fill Progress

<div class="liq"><svg viewBox="0 0 120 120"><defs><clipPath id="c"><circle cx="60" cy="60" r="56"/></clipPath></defs><g clip-path="url(#c)"><rect class="liq-fill" x="0" y="0" width="120" height="120"/><path class="liq-wave" d="M0 60 Q30 50 60 60 T120 60 V120 H0 Z"/></g><circle cx="60" cy="60" r="56" fill="none" stroke="#1c2740" stroke-width="4"/></svg><span class="liq-pct">68%</span></div>

body{background:#0d1426}
.liq{position:relative;width:160px;height:160px}
.liq svg{width:100%;height:100%}
.liq-fill{fill:#141d33}
.liq-wave{fill:#ff477e;animation:wave 2.5s linear infinite;transform:translateY(20px)}
@keyframes wave{0%{transform:translate(0,20px)}100%{transform:translate(-120px,20px)}}
.liq-pct{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:800 30px/1 system-ui,sans-serif}

var w=document.querySelector('.liq-wave');w.setAttribute('d','M0 60 Q30 50 60 60 T120 60 T180 60 V120 H0 Z');w.setAttribute('width','240');