Saved!

SVG drop-shadow - c1wf1mUW

HTML CSS JavaScript Frontend Development

SVG drop-shadow

  
    <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>


  
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js