feDisplacementMap-2.svg

Enable keyboard shortcuts

Checkerboard

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">

<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">

  <feFlood flood-color="#ff0000" result="flood" x="0" y="0" width="100" height="100"/>

  <feDisplacementMap style="color-interpolation-filters:sRGB"

   in="SourceGraphic" in2="flood" scale="100" xChannelSelector="R" yChannelSelector="G"/>

</filter>

<g filter="url(#f1)">

  <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>

</g>

</svg>