Turbulence water

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/filters/turbulence-water.html
  Desc   : Living water ripple via animated feTurbulence displacement
  ============================================================
-->
<div class="sg-turbulence-water" style="--sg-color:#3E8ED0; --sg-size:180px;">
  <svg viewBox="0 0 160 110" aria-hidden="true" focusable="false">
    <defs>
      <filter id="sg-turbulence-water-f" x="-15%" y="-15%" width="130%" height="130%">
        <feTurbulence type="turbulence" baseFrequency="0.014 0.045" numOctaves="2" seed="4" result="noise">
          <animate attributeName="baseFrequency" dur="7s" repeatCount="indefinite"
            values="0.014 0.045; 0.02 0.06; 0.014 0.045" />
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" in2="noise" scale="11"
          xChannelSelector="R" yChannelSelector="G" />
      </filter>
    </defs>
    <g filter="url(#sg-turbulence-water-f)">
      <rect class="sg-turbulence-water-pool" x="14" y="14" width="132" height="82" rx="18" />
      <path class="sg-turbulence-water-line" d="M26 38 H134" />
      <path class="sg-turbulence-water-line" d="M26 56 H134" />
      <path class="sg-turbulence-water-line" d="M26 74 H134" />
    </g>
  </svg>
</div>
<style>
  .sg-turbulence-water {
    width: var(--sg-size);
  }
  .sg-turbulence-water svg {
    display: block;
    width: 100%;
  }
  .sg-turbulence-water-pool {
    fill: var(--sg-color);
    opacity: 0.85;
  }
  .sg-turbulence-water-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 3;
    stroke-linecap: round;
  }
</style>