How SVG feDisplacementMap Creates Distortion Effects

The <feDisplacementMap> filter creates distortion effects in Scalable Vector Graphics (SVG) by using the color values of one image to spatially shift the pixel coordinates of another. By mapping specific color channels—such as Red, Green, Blue, or Alpha—to horizontal and vertical axes, the filter alters the geometry of the target element. This article explains the underlying mechanism, the mathematical formula behind the transformation, key attributes, and practical implementations like generating organic or glitch textures.

The Core Mechanism of Displacement

The <feDisplacementMap> filter requires two inputs: 1. Source Graphic (in): The primary graphic, shape, or text that you want to distort. 2. Displacement Map (in2): A secondary graphic whose color values determine where and how far the pixels of the source graphic move.

Rather than altering the colors of the target graphic, the filter changes where each pixel is drawn. It samples the color values from the displacement map at a given coordinate \((x, y)\) and calculates a new coordinate \((x', y')\) from which to fetch the pixel from the source graphic.

The Mathematical Formula

The shift in position is determined by the following SVG specification formula for calculating the displaced pixel location \(P(x,y)\):

\[P(x,y) \leftarrow I(x + \text{scale} \times (XC(x,y) - 0.5), y + \text{scale} \times (YC(x,y) - 0.5))\]

• \(XC(x,y)\) and \(YC(x,y)\): The normalized color values (ranging from 0.0 to 1.0) of the selected channel at coordinate \((x, y)\) in the map (in2).
• \(- 0.5\) Offset: Mid-tones with a value of 0.5 (such as RGB 128) result in zero displacement. Values greater than 0.5 shift pixels in one direction, while values less than 0.5 shift them in the opposite direction.
• \(\text{scale}\): A multiplier that dictates the maximum distance in user space units that a pixel can be displaced.

Key Attributes of feDisplacementMap

To control the distortion, <feDisplacementMap> provides several configuration attributes:

• scale: Defines the strength of the distortion. A larger value creates a dramatic, widespread warp, while a smaller value produces subtle ripples or surface noise.
• xChannelSelector: Specifies which color channel from in2 controls the horizontal (\(x\)-axis) displacement. Accepted values are R, G, B, or A (Alpha).
• yChannelSelector: Specifies which color channel from in2 controls the vertical (\(y\)-axis) displacement. Accepted values are R, G, B, or A.
• in: The input graphic to be distorted. Defaults to the previous filter primitive result or SourceGraphic.
• in2: The input graphic used as the displacement map. Often set to a generated noise primitive or an external image.

Common Pairing: feTurbulence and feDisplacementMap

While any graphic can serve as a displacement map, <feDisplacementMap> is most frequently paired with the <feTurbulence> primitive.

The <feTurbulence> element algorithmically generates Perlin noise, creating a continuous spectrum of light and dark values with organic, natural transitions. When fed into <feDisplacementMap> as in2, this noise creates realistic effects such as water ripples, heat haze, melting shapes, smoke, and textured glass. Combining simple geometry or text with noise-driven displacement allows vector elements to achieve complex, organic physical behaviors natively in the browser.