Glow effect using snap svg

Question

I am trying to add a glow effect using snap SVG. Unlike raphael.js, I believe Snap doesn't support glow by default. However, there is a shadow effect. I tried to apply the shadow using set interval so that it mimics the behavior of a glow. But it is not working as it is intended to work. I want the shadow to fade-in and out say for 4-5 times making it loo like a glow. Here I invoke the shadow but it remains there irrespective of adding it to a setinterval code. Here is the JS FIDDLE

CODE

var s = Snap("#main");
var thinkers = s.select("#lastImage");
var light = s.select("#look2");

// setinterval with counter
function setIntervalX(callback, delay, repetitions) {
    var x = 0;
    var intervalID = window.setInterval(function () {

        callback();

        if (++x === repetitions) {
            window.clearInterval(intervalID);
        }
    }, delay);
}
// function to add glow

function addShadow() {
    var f = s.filter(Snap.filter.shadow(2, 2, 10, "#ffffff"));
    light.attr({
        filter: f
    });
}
// remove glow/shadow
function removeShadow() {
    var k = s.filter(Snap.filter.shadow(0, 0, 0, "#ffffff"));
    light.attr({
        filter: k
    });
}
setTimeout(shadow, 500)

function shadow() {
    setIntervalX(addShadow, 1000, 4);
}

Answer 1

I'm going to show a slightly different way of doing a filter, which I think should work for any filter, as you can just dictate it via normal svg markup which then opens up a few more filters that you may find out there on the internet to use.

So it will allow you to choose any filter, any combination, and change any attribute of that filter (you can combine them).

Lets suppose you find some svg filter effect, create a string with it, eg...

var myFilter = '<filter id="glow" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur id="gauss" stdDeviation="10 10" result="glow"/><feMerge><feMergeNode in="glow"/><feMergeNode in="glow"/><feMergeNode in="glow"/></feMerge></filter>';

Create your filter with Snap, (it will be a fragment, so we need to append it to the paper)... We can access any of the elements if we have given them an id, or via css selectors with Snap( someCssselector ) as below.

s.append( Snap.parse(myFilter) );
var glowFilter = Snap('#glow');
var gaussian = Snap('#gauss');

var t = s.rect(100,100,100,100).attr({ stroke: 'yellow', fill: 'orange', filter: glowFilter }); 

Then we can create an animate function with a callback, and vary the parameter on any of the filters...

var onOff = 1;

function animGlow() {

    var start = 0; var end = 10;
    if( onOff ) { start = 10; end = 0 };
    onOff = onOff ? 0 : 1; 
    Snap.animate(start,end,function( amount ) {        
        gaussian.attr({ stdDeviation: amount + ' ' + amount });
    }, 800, mina.linear, animGlow);
}

animGlow();

jsfiddle or jsfiddle with a slightly different effect

This will hopefully give some ideas. There are simpler ways if you just want a Snap shadow, but I'm just trying to highlight alternative routes.