SVG <feDisplacementMap> Filter

Last Updated:

What is <feDisplacementMap> Filter?

The <feDisplacementMap> SVG filter primitive uses the pixel values from the image from in2 to spatially displace the image from in.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <filter id="point"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G"/> </filter> <circle cx="75" cy="75" r="70" style="fill:green;filter: url(#point)"/> </svg> </body> </html>

Attributes Value

AttributeExplanation
in Specifies the input for the given filter primitive.
in2 Specifies the second input for the given filter primitive.
scale Specifies the displacement scale factor to be used on a <feDisplacementMap> filter primitive.
xChannelSelector Specifies which color channel from in2 to use to displace the pixels in in along the x-axis.
yChannelSelector Specifies which color channel from in2 to use to displace the pixels in in along the y-axis.

Share this Page

Meet the Author