<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="BlendNormal" > <feOffset in="SourceGraphic" dx="75" dy="0" result="temp"/> <feBlend in2="SourceGraphic" in="temp" mode="normal"/> </filter> <filter id="BlendMultiply" > <feOffset in="SourceGraphic" dx="75" dy="0" result="temp"/> <feBlend in2="SourceGraphic" in="temp" mode="multiply"/> </filter> <filter id="BlendScreen" > <feOffset in="SourceGraphic" dx="75" dy="0" result="temp"/> <feBlend in2="SourceGraphic" in="temp" mode="screen"/> </filter> <filter id="BlendDarken" > <feOffset in="SourceGraphic" dx="75" dy="0" result="temp"/> <feBlend in2="SourceGraphic" in="temp" mode="darken"/> </filter> <filter id="BlendLighten" > <feOffset in="SourceGraphic" dx="75" dy="0" result="temp"/> <feBlend in2="SourceGraphic" in="temp" mode="lighten"/> </filter> <filter id="noblend" > <feOffset in="SourceGraphic" dx="75" dy="0" result="temp"/> <feMerge> <feMergeNode in="SourceGraphic"/> <feMergeNode in="temp"/> </feMerge> </filter> <radialGradient id="grad"> <stop offset="0" stop-color="yellow"/> <stop offset="1" stop-color="lightgreen"/> </radialGradient> <g id="swatch"> <rect x="0" y="0" width="75" height="75" fill="lightblue"/> <rect x="75" y="0" width="75" height="75" fill="url(#grad)"/> </g> <g id="swatchHalf"> <rect x="0" y="0" width="75" height="75" fill="lightblue" opacity="0.5"/> <rect x="75" y="0" width="75" height="75" fill="url(#grad)" opacity="0.5"/> </g> <g id="mask"> <rect x="0" y="0" width="75" height="75" fill="white"/> <rect x="150" y="0" width="75" height="75" fill="white"/> </g> </defs> <use xlink:href="#swatch" x="0" y="25" filter="url(#BlendNormal)"/> <use xlink:href="#mask" x="0" y ="25"/> <use xlink:href="#swatchHalf" x="150" y="25" filter="url(#BlendNormal)"/> <use xlink:href="#mask" x="150" y ="25"/> <text x="10" y="50">normal</text> <use xlink:href="#swatch" x="0" y="125" filter="url(#BlendMultiply)"/> <use xlink:href="#mask" x="0" y ="125"/> <use xlink:href="#swatchHalf" x="150" y="125" filter="url(#BlendMultiply)"/> <use xlink:href="#mask" x="150" y ="125"/> <text x="10" y="150">multiply</text> <use xlink:href="#swatch" x="0" y="225" filter="url(#BlendScreen)"/> <use xlink:href="#mask" x="0" y ="225"/> <use xlink:href="#swatchHalf" x="150" y="225" filter="url(#BlendScreen)"/> <use xlink:href="#mask" x="150" y ="225"/> <text x="10" y="250">screen</text> <use xlink:href="#swatch" x="0" y="325" filter="url(#BlendDarken)"/> <use xlink:href="#mask" x="0" y ="325"/> <use xlink:href="#swatchHalf" x="150" y="325" filter="url(#BlendDarken)"/> <use xlink:href="#mask" x="150" y ="325"/> <text x="10" y="350">darken</text> <use xlink:href="#swatch" x="0" y="425" filter="url(#BlendLighten)"/> <use xlink:href="#mask" x="0" y ="425"/> <use xlink:href="#swatchHalf" x="150" y="425" filter="url(#BlendLighten)"/> <use xlink:href="#mask" x="150" y ="425"/> <text x="10" y="450">lighten</text> <use xlink:href="#swatch" x="0" y="525" filter="url(#noblend)"/> <use xlink:href="#mask" x="0" y ="525"/> <use xlink:href="#swatchHalf" x="150" y="525" filter="url(#noblend)"/> <use xlink:href="#mask" x="150" y ="525"/> <text x="10" y="550">no blend</text> </svg>