How can one add drop shadows to Raphael.js objects?

Question

I would like to find out how to add blurry edged drop shadows to Raphael.js objects/paths. As far as I know it is not possible with the library as is but is there a work aro

Answer 1

Adding a link to Raphael.blur in a separate answer, per the OP's request.

http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js

Updated code sample:

var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
shadow.blur(4);
var shape = canvas.path(p);

Note that in Dmitry's comments he mentions that there is no WebKit support. He uses the element and the feGaussianBlur filter effect. WebKit has implemented the feGaussianBlur effect, but filters are unstable and are disabled in Safari (it may work in Chrome 5 - should definitely work in Chrome 6).