SVG feDisplacementMap Distortion Effects
feDisplacementMap shifts pixels based on a reference map's color values — the technique behind liquid, glass, and wavy distortion effects.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
How Displacement Mapping Works
`<feDisplacementMap in="SourceGraphic" in2="noiseMap" scale="20" xChannelSelector="R" yChannelSelector="G">` shifts each pixel of the source graphic based on the corresponding pixel's color value in a second reference map — commonly generated by feTurbulence — with `scale` controlling displacement intensity.
- Pixel displacement amount derives from a reference map's color channels
- xChannelSelector/yChannelSelector choose which color channel drives each axis
- scale controls how dramatically pixels shift from their original position
Common Distortion Effect Recipes
Combining feTurbulence (generating organic noise) with feDisplacementMap (applying that noise as pixel-shifting distortion) produces liquid, glass-warp, and heat-shimmer effects on text or graphics — a classic SVG filter combination that achieves organic distortion no simple CSS transform can replicate.
- feTurbulence + feDisplacementMap is the classic organic distortion recipe
- Produces liquid, glass-warp, and heat-shimmer visual effects
- Achieves distortion effects impossible with simple CSS transforms alone
Frequently Asked Questions
Can I animate a displacement map's scale value for a moving distortion effect?
Yes — animating the scale attribute (via CSS or SMIL) creates a pulsing or shifting distortion intensity, commonly used for subtle animated 'liquid' logo or text effects.
Do displacement effects work well combined with text elements?
Yes — applying a displacement filter to SVG text creates distinctive wavy, distorted typography effects popular in creative branding and event graphics, though verify text remains legible at your intended distortion intensity.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG