SVG Liquid Text Wave — feTurbulence Distortion Effect

A liquid text wave warps the outline of a headline continuously, as if it were printed on a rippling water surface, using only SVG filter primitives — no canvas, no WebGL, no JavaScript animation loop. The whole effect is declarative: an animated <feTurbulence> noise field displaces an <feDisplacementMap>-driven copy of the text, and the SVG's own native <animate> element handles the timing. It sits in different territory from a CSS-only wave text letter bounce, because the distortion here warps the actual glyph outlines rather than moving whole letters up and down — closer to a heat-haze or underwater refraction than a bounce.

feTurbulence generates the noise field

<feTurbulence type="fractalNoise" baseFrequency="0.012 0.04" numOctaves="2" seed="7" result="noise"> procedurally generates a Perlin-like noise texture directly in the browser's rendering pipeline — no image asset needed. baseFrequency controls how fine or coarse the noise pattern is (two values set separate X and Y frequencies, which is what gives the ripple its horizontally-stretched, water-like character rather than uniform blobs). numOctaves="2" layers two frequencies of noise together for more organic detail than a single octave produces, and seed="7" fixes the pattern so it is reproducible rather than different on every page load.

feDisplacementMap uses that noise to warp the text

<feDisplacementMap in="SourceGraphic" in2="noise" scale="26" xChannelSelector="R" yChannelSelector="G"> takes the actual text (SourceGraphic) and displaces each pixel horizontally and vertically based on the red and green channel values of the noise texture at that same pixel location. scale="26" sets how many pixels of maximum displacement the noise can cause — larger values produce a more extreme, melting distortion; smaller values produce a subtle shimmer.

Animating the filter natively with SVG <animate>

Rather than driving the distortion from JavaScript, a native <animate attributeName="baseFrequency" dur="9s" values="0.012 0.04;0.02 0.06;0.012 0.04" repeatCount="indefinite"> element nested inside <feTurbulence> interpolates the baseFrequency attribute through a sequence of values and back again, looping indefinitely. This makes the noise pattern itself slowly shift character over a 9-second cycle, so the ripple never looks like it is repeating a fixed loop even though the SVG markup itself has no JavaScript animation code at all — the browser's own SMIL animation engine handles everything.

Gradient fill via a linearGradient reference

The text's fill is set to url(#liquidGradient), referencing an SVG <linearGradient> defined in <defs> with three color stops — the same visual effect as CSS background-clip: text gradients (see animated gradient text), but expressed natively as an SVG paint server since the text itself is an SVG <text> element rather than HTML.