# feDisplacementMap Explained

feDisplacementMap is one of the SVG filters that always seems daunting for me to understand. But once I looked into it, it is not so complicated and is actually fun to play with.

Let's first see what this SVG filter can do. `feDisplacementMap` takes in two input source `in` and `in2`. `in` is the image to be displaced, and `in2` is used to calculated how `in` will be displaced. In this case, we used a forest image for `in` and an image created with feTurbulence. We can therefore create a ripple-like effect on the forest image.

In essence, what `feDisplacementMap` is doing is looping through each pixel on an image and move the pixel around based on a transformation formula.

## Transformation Formula

``````P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
``````

Here's a breakdown of the formula:

• `P'(x, y)` on the left is the coordinates after transformation
• The right part is how it is transformed
• `XC(x,y)` and `YC(x,y)` means the RGB value of the given coordinates on the `in2` image divided by 255, so it will be between 0 and 1
• The larger the `scale` is, the more a pixel is displaced

## Example

``````<filter>
<!-- ... -->
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50"
xChannelSelector="R" yChannelSelector="G"/>
</filter>
``````

If we compare the syntax of `feDisplacementMap` and the transformation formula, we realize that:

• scale corresponds to `scale`
• xChannelSelector specifies which color channel to look at for `XC(x,y)`
• yChannelSelector specifies which color channel to look at for `YC(x,y)`

Note: SourceGraphic is the original input to the SVG filter, which is the forest image.

Here's the full example:

``````<svg>
<defs>
<filter id="displace">
<feTurbulence id="turbulence" baseFrequency="0.1 0.1" result="turbulence" />
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="10" xChannelSelector="A" yChannelSelector="A"/>
</filter>
</defs>
<image href="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" height="100%" width="100%" filter="url(#displace)"/>
</svg>
``````

## Now that we understand `feDisplacementMap`

We can go creative to experiment with interesting graphics with `feDisplacementMap`! 