Using a Mask in Snap

Draw a big circle as a mask and animate objects


var s = Snap("#svgout");



var bigC = s.circle(100,100,50).attr({ stroke: 'silver', 'strokeWidth': 40, fill: 'silver' });
var bigC2 = bigC.clone().attr({ cx: 200, cy: 200, fill: 'red' }); 
var bigC3 = bigC.clone().attr({ cx: 200, cy: 50, fill: 'green' });

var clipG = s.group(bigC,bigC2,bigC3);

var c = s.circle(50,50,150).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });

c.attr({ mask: clipG });
c.animate({ cx: 400 }, 2000);


   


        
The actual svg markup looks like this (when you've clicked on run)....