SVG 난기류 변위

<svg width="0" height="0"><filter id="ripple" x="-30%" y="-30%" width="160%" height="160%">
  <feTurbulence id="turb" type="fractalNoise" baseFrequency="0.02 0.04" numOctaves="2" seed="3" result="n"/>
  <feDisplacementMap id="disp" in="SourceGraphic" in2="n" scale="18" xChannelSelector="R" yChannelSelector="G"/>
</filter></svg>
<div class="pool"><h1 class="wave" id="txt">WAVE</h1></div>
<div class="label" id="l">scale: 18</div>

.pool{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#0ea5e9,#075985)}
.wave{position:relative;color:#fff;font:800 15vmin/1 sans-serif;letter-spacing:.02em;filter:url(#ripple);margin:0}
.label{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 12px/1.4 monospace}

const disp = document.getElementById('disp');
const turb = document.getElementById('turb');
const l = document.getElementById('l');
let t = 0;
function loop(){
  t += 0.02;
  const scale = 14 + Math.sin(t) * 10;
  disp.setAttribute('scale', scale.toFixed(1));
  const bf = 0.018 + Math.sin(t * 0.6) * 0.006;
  turb.setAttribute('baseFrequency', bf.toFixed(4) + ' ' + (bf * 1.8).toFixed(4));
  l.textContent = 'scale: ' + scale.toFixed(0);
  requestAnimationFrame(loop);
}
loop();