<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" preserveAspectRatio="xMidYMid meet" viewBox="-20 -20 140 140" height="20mm" width="20mm" version="1.2">

<g style="fill: blue; fill-opacity: 0.7;">

<rect y="0" x="0" height="20" width="20"></rect>

<rect y="0" x="40" height="20" width="20"></rect>

<rect y="0" x="80" height="20" width="20"></rect>

<rect y="20" x="40" height="20" width="20"></rect>

<rect y="40" x="0" height="20" width="20"></rect>

<rect y="40" x="20" height="20" width="20"></rect>

<rect y="40" x="60" height="20" width="20"></rect>

<rect y="40" x="80" height="20" width="20"></rect>

<rect y="80" x="40" height="20" width="20"></rect>

</g>

<defs>

<mask maskContentUnits="userSpaceOnUse" id="Mask">

<rect style="fill-opacity: 0.5; fill: white;" y="-20" x="-20" height="140" width="140"></rect>

<g style="fill: blue; fill-opacity: 1.0;">

<rect y="0" x="0" height="20" width="20"></rect>

<rect y="0" x="40" height="20" width="20"></rect>

<rect y="0" x="80" height="20" width="20"></rect>

<rect y="20" x="40" height="20" width="20"></rect>

<rect y="40" x="0" height="20" width="20"></rect>

<rect y="40" x="20" height="20" width="20"></rect>

<rect y="40" x="60" height="20" width="20"></rect>

<rect y="40" x="80" height="20" width="20"></rect>

<rect y="80" x="40" height="20" width="20"></rect>

</g>

</mask>

</defs>

<rect mask="url(#Mask)" style="fill-opacity: 1.0; fill: red;" y="-20" x="-20" height="140" width="140"></rect>