Skip to content

Instantly share code, notes, and snippets.

@devdays
Created November 30, 2014 23:34
Show Gist options
  • Save devdays/06e2a69f06d42dc6eb74 to your computer and use it in GitHub Desktop.
Save devdays/06e2a69f06d42dc6eb74 to your computer and use it in GitHub Desktop.
SVG Filter
Display the source blob
Display the rendered blob
Raw
<svg>
<!--the offset image can be blurred (with <feGaussianBlur>): -->
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="orange" filter="url(#f1)" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment