chromium/src/third_party/blink/web_tests/svg/filters/feOffset.svg

<svg xmlns="http://www.w3.org/2000/svg" id="body" width="800" height="600">
    <defs>
      <style type="text/css">
       * {stroke:black; stroke-width:0.2;}
      </style>
        <filter id="filter_1effect_01" primitiveUnits="objectBoundingBox">
            <feOffset dx="0.2" />
            <feOffset dx="0.2" />
        </filter>

        <filter id="filter_1effect_02" primitiveUnits="objectBoundingBox">
            <feOffset x="0%" y="0%" width="50%" height="75%"  dx="0.5" />
            <feOffset x="25%" y="25%" width="75%" height="75%" dx="-0.1" />
        </filter>

        <filter id="filter_1effect_03" primitiveUnits="objectBoundingBox">
            <feOffset width="100%" dx="-0.2" />
            <feOffset dx="0.2" />
        </filter>

        <filter id="filter_1effect_04" primitiveUnits="objectBoundingBox">
            <feOffset y="0%" height="50%" dx="0.5" dy="0.1"/>
            <feOffset x="25%" dx="-0.5" />
        </filter>

        <filter id="filter_1effect_05" primitiveUnits="objectBoundingBox">
            <feOffset x="0%" y="0%" width="100%" height="100%" dx="0.9"/>
            <feOffset dy="-0.9"/>
        </filter>

        <filter id="filter_1effect_06" primitiveUnits="objectBoundingBox">
            <feOffset dy="-.4"/>
            <feOffset x="-50%" y="0%" width="200%" height="100%" dx="-1"/>
        </filter>

        <filter id="filter_1effect_07">
            <feOffset dx="20"/>
            <feOffset dx="0.5"/>
        </filter>
    </defs>

    <g transform="translate(10, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_01);stroke:none;"/>
    </g>

    <g transform="translate(110, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_02);stroke:none;"/>
    </g>

    <g transform="translate(210, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_03);stroke:none;"/>
    </g>

    <g transform="translate(310, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_04);stroke:none;"/>
    </g>

    <g transform="translate(410, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_05);stroke:none;"/>
    </g>

    <g transform="translate(510, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_06);stroke:none;"/>
    </g>

    <g transform="translate(610, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_07);stroke:none;"/>
    </g>
</svg>