From the course: SVG: Clipping, Masking, and Filters

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

feDisplacementMap

feDisplacementMap

From the course: SVG: Clipping, Masking, and Filters

Start my 1-month free trial

feDisplacementMap

“

- [Instructor] The feDisplacementMap filter primitive, which uses the pixel values from one graphic to displace the pixels of another, is an example of an SVG filter that has a lot of promise in theory, but a serious letdown in reality. The basic idea is what you're seeing right now in my browser window. You grab two graphics, so in this case, the original beach graphic and then a turbulence filter, then you use feDisplacementMap to first grab the original graphic, then the filter graphic you'll use to displace it, set the scale of the displacement filter, choose which channels you want to use to displace the graphic in the x-direction and the y-direction, and then you end up with some sort of picture that has been displaced and what you see here. The attributes worth mentioning here are scale, which is the literal scale of the in2 element, so in this case, I'm scaling up the turbulence. You can see if I reduce this number here down to 10, it gets much smaller and I can reduce it down…

Contents