Dropshadows in Raphaël.js

For a university seminar I needed to create dropshadows for Raphaël objects. I wrote an SVG filter for that and found the blur plugin of the Raphaël author Dmitry Baranovskiy, that applies an SVG filter to Raphaël objects.

Demo

The SVG filter basically blurs the alpha channel of the object and offsets it.

There are two ways of using the plugin, one is per element:

el.dropShadow(size, offsetX, offsetY, opacity = 1)

and the other way adds a global filter that can be used specifying the class dropshadow.

You can find the code and more documentation on the Github page.

Comments