<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="800px" height="400px" viewBox="0 0 800 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<title>Shadow Test</title>
  <defs>
    <linearGradient id="background-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: #F3BE8D; stop-opacity: 1"/>
      <stop offset="50%" style="stop-color: #AAD0E8; stop-opacity: 1"/>
      <stop offset="100%" style="stop-color: #ADC393; stop-opacity: 1"/>
    </linearGradient>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feOffset result="offset-output" in="SourceAlpha" dx="2" dy="2" />
      <feGaussianBlur result="blur-output" in="offset-output" stdDeviation="2" />
      <feColorMatrix in="blur-output" result="color-output" type="matrix" values="0 0 0 0   0
                  0 0 0 0   0
                  0 0 0 0   0
                  0 0 0 0.5 0" />
      <feBlend in="SourceGraphic" in2="color-output" mode="normal" opacity="0.3" />
    </filter>
    <circle id="circle-test" r="20" />
    <g id="windmill">
      <circle id="hub" r="20" />
      <rect width="10" height="100" />
      <rect width="10" height="100" transform="rotate(120)" />
      <rect width="10" height="100" transform="rotate(240)" />
      <animateTransform xmlns="http://www.w3.org/2000/svg"
                      attributeName="transform"
                      attributeType="XML"
                      begin="0s"
                      dur="20s"
                      type="rotate"
                      from="0"
                      to="360"
                      repeatCount="indefinite"/>
    </g>
    <g id="simulated-drop-shadow">
      <use xlink:href="#windmill" fill="#000000" opacity="0.3" x="2" y="2" />
      <use xlink:href="#windmill" fill="#FFFFFF" />
    </g>
    <g id="filter-drop-shaow" filter="url(#shadow)">
      <use xlink:href="#windmill" fill="#FFFFFF" />
    </g>
  </defs>
  
  <rect style="fill: url( #background-gradient );" width="800" height="400"/>
  
  <text x="50" y="50" fill="#FFFFFF">Simulated drop-shadow with &lt;use&gt; element</text>
  <g>
    <use xlink:href="#simulated-drop-shadow" x="100" y="100"/>
    <use xlink:href="#simulated-drop-shadow" x="200" y="100"/>
    <use xlink:href="#simulated-drop-shadow" x="300" y="100"/>
    <use xlink:href="#simulated-drop-shadow" x="100" y="200"/>
    <use xlink:href="#simulated-drop-shadow" x="200" y="200"/>
    <use xlink:href="#simulated-drop-shadow" x="300" y="200"/>
    <use xlink:href="#simulated-drop-shadow" x="100" y="300"/>
    <use xlink:href="#simulated-drop-shadow" x="200" y="300"/>
    <use xlink:href="#simulated-drop-shadow" x="300" y="300"/>
    
    <animateTransform xmlns="http://www.w3.org/2000/svg"
                      attributeName="transform"
                      attributeType="XML"
                      type="translate"
                      values="0, -10; 0, 60; 0, -10"
                      dur="2s"
                      calcMode="spline"
                      keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
                      keyTimes="0;0.5;1"
                      repeatCount="indefinite"
                      />
    <animate xmlns="http://www.w3.org/2000/svg"
             attributeName="display"
             attributeType="XML"
             dur="5s"
             from="block"
             to="none"
             repeatCount="indefinite"
             />
  </g>
  
  <text x="485" y="50" fill="#FFFFFF">Drop-shadow with &lt;filter&gt; element</text>
  <g id="filtered-windmills">
    <use xlink:href="#filter-drop-shaow" x="500" y="100"  />
    <use xlink:href="#filter-drop-shaow" x="600" y="100"  />
    <use xlink:href="#filter-drop-shaow" x="700" y="100"  />
    <use xlink:href="#filter-drop-shaow" x="500" y="200"  />
    <use xlink:href="#filter-drop-shaow" x="600" y="200"  />
    <use xlink:href="#filter-drop-shaow" x="700" y="200"  />
    <use xlink:href="#filter-drop-shaow" x="500" y="300"  />
    <use xlink:href="#filter-drop-shaow" x="600" y="300"  />
    <use xlink:href="#filter-drop-shaow" x="700" y="300"  />
    
    <animateTransform xmlns="http://www.w3.org/2000/svg"
                      attributeName="transform"
                      attributeType="XML"
                      type="translate"
                      values="0, -10; 0, 60; 0, -10"
                      dur="2s"
                      calcMode="spline"
                      keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
                      keyTimes="0;0.5;1"
                      repeatCount="indefinite"
                      additive="sum"
                      />
    <animate xmlns="http://www.w3.org/2000/svg"
             attributeName="display"
             attributeType="XML"
             dur="5s"
             from="none"
             to="block"
             repeatCount="indefinite"
             />
  </g>
  
</svg>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.