Collection from SVG Filters

svg_filters.svg

<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 17 -7" result="cm" />
            <feComposite in="SourceGraphic" in2="cm" />
        </filter>
        <filter id="f2" x="-100%" y="-60%" width="600%" height="100%">
            <feOffset in="SourceAlpha" dx="9" dy="3" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="0.51" />
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.05" />
            </feComponentTransfer>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>

        <filter id="innershadow">

            <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
            <feOffset dy="3" dx="2" />
            <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff" />
            <feFlood flood-color="#bcbdaa" flood-opacity="0.3" />
            <feComposite in2="shadowDiff" operator="in" />
            <feComposite in2="SourceGraphic" operator="over" result="firstfilter" />

            <feGaussianBlur in="firstfilter" stdDeviation="2" result="blur2" />
            <feOffset dy="-2" dx="-1" />
            <feComposite in2="firstfilter" operator="arithmetic" k2="-1" k3="1" result="shadowDiff" />
            <feFlood flood-color="#bcbdaa" flood-opacity="0.3" />
            <feComposite in2="shadowDiff" operator="in" />
            <feComposite in2="firstfilter" operator="over" />

        </filter>

        <filter id="dropshadow">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
            <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
            <feMerge>
                <feMergeNode/> <!-- this contains the offset blurred image -->
                <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
            </feMerge>
        </filter>

    </defs>

    <g filter="url(#goo)">
        <ellipse cy="30" cx="30" ry="20" rx="20" fill="#707020" class="animated infinite bounceInLeft wobble" />
        <ellipse cy="30" cx="70" ry="20" rx="20" fill="#707020" class="animated infinite bounceInRight wobble" />
    </g>

    <g filter="url(#dropshadow)">
        <ellipse cy="120" cx="40" ry="20" rx="20" fill="#f00b42"  />
    </g>

    <g filter="url(#innershadow)">
        <ellipse cy="220" cx="40" ry="20" rx="20" fill="#101"  />
    </g>

</svg>