filter-in-mask-01.svg

Enable keyboard shortcuts

Checkerboard

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 1 1" preserveAspectRatio="xMidYMid slice">

  <!-- filter effects region covers whole viewbox -->

  <filter id="myFilter" filterUnits="userSpaceOnUse" x="-1" y="-1" width="1" height="1">

    <feGaussianBlur stdDeviation="0"/>

  </filter>

  <!-- mask effects region covers whole viewbox, opaque white mask -->

  <mask id="myMask" maskUnits="userSpaceOnUse" x="-1" y="-1" width="1" height="1">

    <rect filter="url(#myFilter)" x="-1" y="-1" width="1" height="1" fill="#FFFFFF"/>

  </mask>

  <rect x="-1" y="-1" width="1" height="1" fill="red"/>

  <rect mask="url(#myMask)" x="-1" y="-1" width="1" height="1" fill="lime"/>

</svg>