Animated SVG Filter Effect

Transparent png image + spec lighting over texture (animated via dom with dart) - Original pen drawing by Edmund J Sullivan 1900 published in Modern Pen Drawings, 1901

While SVG filter effects are now implemented in all major browsers, unfortunately this example is only working in Chrome/Safari (webkit). While script animation in IE is working, the final comp on the background texture and SourceGraphic are out. This also seems to be the problem in ff and opera. The good news is that the problems are things to be fixed rather than 'not implemented' features, so just a matter of time while the bugs are ironed out. Declaritive animation on the filter effects doesnt seem to be working in any of the browsers.

in IE10 (DOM Animation OK)
in Firefox 20.0
in Chrome 27.0

Dart Code

              
import 'dart:html';
import 'dart:math';              

void main(){              
  var count = 51;
  var multiplier = 1;
  var rng = new Random();
  var timer = new Timer.periodic(const Duration(milliseconds: 100),(t){
    if(count == 120 || count == 50){
      multiplier *= -1;
    }
    count += 1*multiplier;
    query("#fltrTexture1").attributes["filterRes"] = "${count}";    
    query("#fltrprimTurbulence").attributes["seed"] = "${rng.nextInt(10)}"; 
  });
}
Note the update of the filterRes, while it might add some to the effect here, it was put in because of quirk in Chrome where the filter effect will not update in realtime unless this is tweaked along with the other attribute value. More info here.

And the SVG (just drop it into your html)...

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="480px" height="660px" preserveAspectRatio="xMidYMid meet"> 

  <defs>
  
    <filter id="fltrTexture1" filterUnits="objectBoundingBox" x="-30%" y="-30%" width="160%" height="160%" filterRes="800">
      <feTurbulence id="fltrprimTurbulence" type="turbulence" stitchTiles="stitch" baseFrequency="0.1,0.1" numOctaves="9" seed="13" result="noise"/>
      <feGaussianBlur id="fltrprimBlur" in="noise" stdDeviation="17.9,0.5" result="motionBlur"/>
      <feSpecularLighting id="fltrprimLighting" in="motionBlur" surfaceScale="10.0" specularConstant="0.2" specularExponent="23.0" lighting-color="rgb(255,235,235)" result="lighting">
        <fePointLight id="fltrprimPointLight" x="-5000" y="-10000" z="70000"></fePointLight>
      </feSpecularLighting>
      <feComposite in="lighting" in2="SourceAlpha" operator="in"/>
    </filter>
    
    <filter id="fltrLighting" filterUnits="objectBoundingBox" x="-30%" y="-30%" width="160%" height="160%" filterRes="150">
       <feImage xlink:href="#background" x="10" result="back"/>
       <feDiffuseLighting result="spotlight" diffuseConstant="5" lighting-color="#700">
            <feSpotLight x = "1000" y = "1000" z = "4000" pointsAtX="0" pointsAtY="-100" pointsAtZ="-100" limitingConeAngle="9.5"/>
       </feDiffuseLighting> 
       <feComposite in2="back" in="spotlight"  operator="arithmetic" k1="0" k2="0.8" k3="0.8" k4="0" result="comp" />
       <feBlend in="SourceGraphic" in2="comp" method="multiply" />  
    </filter>              

    <g id="background">
      <rect id="rectBack" width="480" height="660" fill="black"/>
      <g filter="url(#fltrTexture1)">  
        <rect width="480" height="660" fill="white" />
      </g>
    </g>

  </defs>

  <image xlink:href="images/sullivan1900.png" width="480" height="660" filter="url(#fltrLighting)" />

</svg>

Our Google+ SVG-Developers community is brand new and looking for new members. There is also a space here for your SVG examples and tutorials.