SVG

Wave Distort Text

SVGフィルターで文字が波状に歪むエフェクト。フィルター値をJSでアニメーション。

HTML

<svg style="position:absolute;width:0;height:0">
  <filter id="wdt-filter">
    <feTurbulence id="wdt-turb" type="turbulence" baseFrequency="0.01 0.02" numOctaves="2" result="turbulence"></feTurbulence>
    <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="8" id="wdt-disp"></feDisplacementMap>
  </filter>
</svg>
<h2 class="wdt-text">DISTORT</h2>

CSS

.wdt-text {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #a855f7;
  filter: url(#wdt-filter);
}

JavaScript

const turb = document.getElementById('wdt-turb');
let t = 0;
function animate() {
  t += 0.003;
  const freq = (0.01 + Math.sin(t) * 0.005).toFixed(4) + ' ' + (0.02 + Math.cos(t * 0.7) * 0.005).toFixed(4);
  turb.setAttribute('baseFrequency', freq);
  requestAnimationFrame(animate);
}
animate();

Wave Distort Text

関連アニメーション