<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="animate-filter" width="180" height="180">
              <feGaussianBlur stdDeviation="1" />
        <feComponentTransfer result="outColor">
        <feFuncR type="table" tableValues="1 1"></feFuncR>
        <feFuncG type="table" tableValues="0.67 0.67"></feFuncG>
        <feFuncB type="table" tableValues="0.21 0.21"></feFuncB>
          <feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
        </feComponentTransfer>
        <feGaussianBlur result="outShadow" in="outColor" stdDeviation="3" />
        <feGaussianBlur result="outShadowAnimate" in="outColor" stdDeviation="3">
          <animate id="increase" attributeType="XML" attributeName="stdDeviation" from="3" to="10" begin="0s;decrease.end" dur="0.4s" />
          <animate id="decrease" attributeType="XML" attributeName="stdDeviation" from="10" to="3" begin="increase.end" dur="0.4s" />
        </feGaussianBlur>

        <feMerge>
          <feMergeNode in="outShadowAnimate" />
          <feMergeNode in="outShadow" />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
  </defs>

  <rect x="50" y="50" width="100" height="100" stroke="black" fill="green" filter="url(#animate-filter)"/>
</svg>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.