filter-in-mask-02.svg

Enable keyboard shortcuts

Checkerboard

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

  <defs>

    <filter x="0" y="0" width="1" height="1" id="solid">

      <feFlood flood-color="black"/>

    </filter>

    <mask id="myMask">

      <rect fill="white" width="100%" height="100%"/>

      <g transform="translate(10000, 0)">

        <rect fill="blue" width="100%" height="100%" filter="url(#solid)"/>

      </g>

    </mask>

  </defs>

  <!-- You should see pure lime color as background color of a whole page. -->

  <rect fill="red" width="100%" height="100%"/>

  <g mask="url(#myMask)">

    <rect x="0" y="0" width="100%" height="100%" fill="lime"></rect>

  </g>

</svg>