Raphael.js create transparency through the intersection of multiple object

Question

I'm creating an "amazing" effect to show a product (that brilliant 'absolutedy need it' from the customer!).

I've already realized the effect http://jsfiddle.net/EMpQd/9/ (it's easier to see than to explain).

My problem is: setting a rectangle in the background, and then a circle on top of it, I need to get transparency not only in the circle, but also in the rectangle, in the section covered by the circle (aka the intersection).

How I can achieve this? Is this possible with Raphael?

code for the effect (without transparency):

var w = 800;
var h = 600;

var paper = Raphael(0, 0, w, h);

// I want to show this image through the effect (it's just an example)
paper.image("http://static.pourfemme.it/pfmoda/fotogallery/625X0/63617/borsa-alviero-martini-rodeo-drive.jpg", 0, 0, w, h);

// colored background
paper.rect(0, 0, w, h).attr("fill", "#999").attr("stroke-width", 0).attr("opacity", 1);

// the circle in which I'll show the product
var circle = paper.circle(400, 300, 1);

circle.attr({fill: "#FFF", stroke: "#FFF", "stroke-width": 0});

//expand the circle
circle.animate({r: w*2}, 10000);

Answer 1

You can make "donut" objects with paths by drawing the outside object and then drawing the inside object counterclockwise to the original (thanks to this SO answer). So you want to create a masking object by drawing the rectangle and then the circle inside it. Unfortunately, this means you have to draw everything in path notation instead of using the convenient rect and circle objects.

var w = 800;
var h = 600;

var paper = Raphael(0, 0, w, h);

// i want to show this image through the effect
paper.image("http://static.pourfemme.it/pfmoda/fotogallery/625X0/63617/borsa-alviero-martini-rodeo-drive.jpg", 0, 0, w, h);

//path coordinates for bounding rectangle
var outerpath = "M0,0L" + w + ",0L" + w + "," + h + "L0," + h + "L0,0z";

//path coordinates for inner circle
var r = 1;
//see https://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path for explanation of the extra 0.1 pixel
var innerpath = "M" + (w/2) + "," + (h/2 - r) + "A" + r + "," + r + "  0 1,0 " + (w/2 + 0.1) + "," + (h/2 - r) + "z";

var path1 = outerpath + innerpath;
var mask = paper.path(path1).attr({stroke: 0, fill:  "#999"});

Then you up the radius, calculate the new path, and animate it:

r = 600;

var innerpath = "M" + (w/2) + "," + (h/2 - r) + "A" + r + "," + r + "  0 1,0 " + (w/2 + 0.001) + "," + (h/2 - r) + "z";

var path2 = outerpath + innerpath;

var anim = Raphael.animation({path: path2}, 2000);
mask.animate(anim.delay(1000));

updated fiddle