feDisplacementMap filter


scale: number ( 0 give no effect )
xChannelSelector: R G B or A
yChannelSelector: R G B or A
in : picture to transform
in2 : picture for calculate pixels ( can be same that in )

Tool: Change parameters, pictures see effects and save SVG
Examples: animations on JPEG picture with grid small circles - concentric circles - horizontal strips - checked grid - radial gradient

Example of code:

<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
<feImage xlink:href='#MyImage1' result='pict1'/>
<feImage xlink:href='#MyImage2' result='pict2'/>
<feDisplacementMap scale="4" xChannelSelector="R" yChannelSelector="G" in2="pict2" in="pict1"/>
<image id="MyImage1" width='400' height='400' xlink:href='memo1.svg'/>
<image id="MyImage2" width='400' height='400' xlink:href='ronds.svg'/>
<use filter="url(#MyFilter)" x='0' y='0'/>