Edit in JSFiddle

var draw = SVG('drawing').size(300, 130)
var circle = draw.circle(50).fill('#fff')

var mask = draw.mask()
mask.add(circle.center(35, 35))
mask.add(circle.clone().center(70, 70).size(70).fill('#ccc'))
mask.add(circle.clone().center(90, 30).size(30).fill('#999'))
mask.add(circle.clone().center(105, 115).size(50).fill('#333'))

var rect = draw.rect(100, 100).move(20, 20).fill('#f06')
rect.maskWith(mask)

rect.on('mouseover', function() {
	this.animate(300, '<>').fill('#0f9')
})
rect.on('mouseout', function() {
	this.animate(300, '<>').fill('#f06')
})