Skip to content

Instantly share code, notes, and snippets.

@redblobgames

redblobgames/drop-shadow.html

Created March 8, 2017 00:48
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save redblobgames/6851dc787241e390c241cd9484b16e4d to your computer and use it in GitHub Desktop.
Save redblobgames/6851dc787241e390c241cd9484b16e4d to your computer and use it in GitHub Desktop.
Download ZIP
SVG drop shadow example
Raw
drop-shadow.html
<!DOCTYPE html>
<html>
<svg width="80%" height="80%" viewBox="-100 -100 200 200">
<!-- Need this definition to make a drop shadow - based on examples from many articles, including svg spec -->
<defs>
<filter id="drop-shadow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="#000000"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- example of shapes with shadows -->
<circle cx="40" cy="-40" r="10" fill="red" filter="url(#drop-shadow)"/>
<circle cx="-60" cy="50" r="50" fill="blue" filter="url(#drop-shadow)"/>
</svg>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment