Skip to content

Instantly share code, notes, and snippets.

@brachycera
Last active Aug 18, 2018
Embed
What would you like to do?
Collection from SVG Filters
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment