<!DOCTYPE html>
<html>
    <body>
        <p>You should see a solid green square below</p>
        <svg width="800px" height="800px" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <filter id="light" filterUnits="userSpaceOnUse" x="100" y="100" width="200" height="200">
                    <feTurbulence  seed="1" type="turbulence" baseFrequency="0.01" numOctaves="1" stitchTiles="stitch" />
                    <feComponentTransfer>
                      <feFuncR type="discrete" tableValues="0 0.5 0.5 0.5 1" />
                      <feFuncG type="discrete" tableValues="0 0.5 0.5 0.5 1" />
                      <feFuncB type="discrete" tableValues="0 0.5 0.5 0.5 1" />
                      <feFuncA type="discrete" tableValues="0 1 1 1 1" />
                    </feComponentTransfer>
                </filter>
                <clipPath id="clip-out-middle">
                  <rect x="160" y="160" width="80" height="80" />
                </clipPath>
            </defs>
            <rect x="160" y="160" width="80" height="80" fill="green" />
            <rect x="0" y="0" width="400" height="400" filter="url(#light)" clip-path="url(#clip-out-middle)"/>
        </svg>
        </div>
    </body>
</html>
