Liquid-fill text

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/text-fx/text-liquid-fill.html
  Desc   : Letterforms fill with rising liquid topped by a moving wave
  ============================================================
-->
<div class="sg-text-liquid-fill" style="--sg-color:#3F8FDF; --sg-size:260px; --sg-duration:5s;">
  <svg viewBox="0 0 260 90" role="img" aria-label="FLOW">
    <title>FLOW</title>
    <defs>
      <clipPath id="sg-text-liquid-fill-clip">
        <text class="sg-text-liquid-fill-txt" x="130" y="72">FLOW</text>
      </clipPath>
    </defs>
    <text class="sg-text-liquid-fill-txt sg-text-liquid-fill-ghost" x="130" y="72">FLOW</text>
    <g clip-path="url(#sg-text-liquid-fill-clip)">
      <g class="sg-text-liquid-fill-rise">
        <path class="sg-text-liquid-fill-wave"
          d="M-260 8 q32 -14 65 0 t65 0 t65 0 t65 0 t65 0 t65 0 t65 0 t65 0 V120 H-260 Z" />
      </g>
    </g>
  </svg>
</div>
<style>
  .sg-text-liquid-fill {
    width: var(--sg-size);
  }
  .sg-text-liquid-fill svg {
    display: block;
    width: 100%;
  }
  .sg-text-liquid-fill-txt {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: 2px;
    text-anchor: middle;
  }
  .sg-text-liquid-fill-ghost {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 1.5;
    opacity: 0.35;
  }
  .sg-text-liquid-fill-rise {
    animation: sg-text-liquid-fill-up var(--sg-duration) ease-in-out infinite;
  }
  .sg-text-liquid-fill-wave {
    fill: var(--sg-color);
    animation: sg-text-liquid-fill-roll calc(var(--sg-duration) / 3) linear infinite;
  }
  @keyframes sg-text-liquid-fill-up {
    0%        { transform: translateY(62px); opacity: 1; }
    60%       { transform: translateY(6px); }
    82%       { transform: translateY(6px); opacity: 1; }
    94%       { transform: translateY(6px); opacity: 0; }
    100%      { transform: translateY(62px); opacity: 0; }
  }
  @keyframes sg-text-liquid-fill-roll {
    to { translate: 130px 0; }
  }
</style>