SVG Drop Shadows

A look at trying to animate drop shadows in SVG to support a material design style

by IPWright83

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>

<svg id="svg_keyframes" width="1000" height="280">
    <g id="svg_keyFrames_Group" transform="translate(120, 140)">
        <circle id="svg_keyFrames_Circle" r="110"/>
        <text dx="-1.5em">Circle 1</text>
    </g>
    <g transform="translate(420, 140)">
        <circle r="110"/>
        <text dx="-1.5em">Circle 2</text>
    </g>
</svg>
<svg id="svg_filterKeyFrames" width="1000" height="280">
    <defs>
        <filter id="f1" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="4" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
        <filter id="f2" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="7" />
            <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="15" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
         <filter id="f3" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="10" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="20" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
         <filter id="f4" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="13" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="25" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
         <filter id="f5" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="16" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="30" />
            <feBlend in="SourceGraphic"...

CSS

circle {
   fill: #8BC34A;
   stroke: white;
   stroke-width: 2px;
}

text {
    fill: white;
}

/*****************/
/* CSS KeyFrames */
/*****************/
#svg_keyframes{
  animation:filters 2s infinite;
}

@-webkit-keyframes filters {
  0%{ 
    -webkit-filter:drop-shadow(0px 16px 10px #333); 
  }
  100% { 
    -webkit-filter:drop-shadow(0px 16px 30px #333); 
  }
}

/***********************************/
/* CSS KeyFrames using SVG Filters */
/***********************************/

.kf_Shadow1 {
    -webkit-animation-name: shadow-expand; / Chrome, Safari, Opera /
    -webkit-animation-duration: 2s; / Chrome, Safari, Opera /
    -webkit-animation-iteration-count: infinite;
    animation-name: shadow-expand;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.kf_Fill1 {
    -webkit-animation-name: circle-fill; / Chrome, Safari, Opera /
    -webkit-animation-duration: 2s; / Chrome, Safari, Opera /
    -webkit-animation-iteration-count: infinite;
    animation-name: circle-fill;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.kf_DropShadow1 {
    -webkit-animation-name: drop-shadow-expand; / Chrome, Safari, Opera /
    -webkit-animation-duration: 2s; / Chrome, Safari, Opera /
    -webkit-animation-iteration-count: infinite;
    animation-name: drop-shadow-expand;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/* Demonstrate that fill works correctly */
@keyframes circle-fill {
    0% { fill: #FF0000; }       
    25% { fill: #BB0033; }       
    50% { fill: #990066; }        
    75% { fill: #4400aa; }         
    100% { fill: #0000ff; }       
}

/* Demonstrate that filter doesn't work as hoped */
@keyframes shadow-expand {
    0% { filter: url(#f1); -webkit-filter: url(#f1);}       
    25% { filter: url(#f2); -webkit-filter: url(#f1);}       
    50% { filter: url(#f3); -webkit-filter: url(#f1);}       
    75% { filter: url(#f4); -webkit-filter: url(#f1);}       
    100% { filter: url(#f5);...