<feDisplacementMap> Playground
Distort pixels by reading displacement values from another image's colour channels. Combined with feTurbulence, creates organic distortion effects like ripples and heat haze.
Preview
Parameters
How far pixels can be displaced. 0 = no distortion, higher = more extreme warping.
Which colour channel of the noise controls horizontal displacement.
Which colour channel of the noise controls vertical displacement.
Noise zoom level. Lower = larger features, higher = finer grain.
Layers of detail in the noise. More = finer detail but slower.
"turbulence" - sharp, swirly
"fractalNoise" - smoother, cloud-like
"fractalNoise" - smoother, cloud-like
Generated Code