<!DOCTYPE html>
<svg width="450" height="350">
    <defs>
        <filter id="f1">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f2a">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f2b">
            <feColorMatrix type="hueRotate" values="240"/>
        </filter>
        <filter id="f3">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f4">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f5">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f6" x="50%">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f7">
            <feFlood flood-color="green"/>
        </filter>
        <filter id="f8">
            <feColorMatrix type="hueRotate" values="240"/>
        </filter>
        <filter id="f9a" width="50%"/>
        <filter id="f9b" xlink:href="#f9a">
            <feFlood flood-color="blue"/>
        </filter>
        <filter id="f10a"/>
        <filter id="f10b" width="50%"/>
        <filter id="f10c" xlink:href="#f10b">
            <feFlood flood-color="blue"/>
        </filter>
        <filter id="f11">
            <feComponentTransfer>
                <feFuncR type="linear" slope="1" intercept="1"/>
                <feFuncG type="linear" slope="1" intercept="0"/>
                <feFuncB type="linear" slope="1" intercept="0"/>
            </feComponentTransfer>
        </filter>
    </defs>

    <rect id="r1" x="50" y="50" width="50" height="50" fill="purple" filter="url(#f1)"/>
    <rect id="r2" x="150" y="50" width="50" height="50" fill="purple" filter="url(#f2b)"/>
    <rect id="r3" x="250" y="50" width="50" height="50" fill="purple"/>
    <rect id="r4" x="350" y="50" width="50" height="50" fill="red" filter="url(#f4)"/>
    <rect id="r5" x="50" y="150" width="75" height="50" fill="purple" filter="url(#f5)"/>
    <rect id="r6" x="150" y="150" width="50" height="50" fill="purple" filter="url(#f6)"/>
    <rect id="r7" x="250" y="150" width="50" height="50" fill="purple" filter="url(#f7)"/>
    <rect id="r8" x="350" y="150" width="50" height="50" fill="purple" filter="url(#f8)"/>
    <rect id="r9" x="50" y="250" width="50" height="50" fill="purple" filter="url(#f9b)"/>
    <rect id="r10" x="150" y="250" width="50" height="50" fill="purple" filter="url(#f10c)"/>
    <rect id="r11" x="250" y="250" width="50" height="50" fill="purple" filter="url(#f11)"/>
</svg>
