FRaphael - Filter Effects for Raphael.js

Extension to Raphael

Simply create an element using Raphael.js, then chain some effects to apply to it.


				// Create a Raphael paper 

				var paper = Raphael("example");

				

				var attr = {fill: "red"};

				

				// A plain ol' circle 

				paper.circle(50, 50, 25).attr(attr);

				// ..with an embossed effect 

				paper.circle(150, 50, 25).attr(attr).emboss();

				// ..and with a shadow, too! 

				paper.circle(250, 50, 25).attr(attr).emboss().shadow();

Build custom filters

Filter Effects for Raphael lets you build Filters in a similar way to Raphael's element methods. You can create any possible SVG effect by stacking Filter Effects; the filter can then bee applied to any Raphael Element.


				var paper = Raphael("example");

				

				var filter = paper.createFilter();

				filter.addShiftToColor("red");

				filter.addBlur(7);

				

				var cicle = paper.circle(50, 50, 25).attr({fill: "green"});

				circle.filter(filter);

				

				var rect = paper.rect(100, 25, 50, 50).attr({fill: "blue"});

				rect.filter(filter);

Use the DOM interface to take advantage of the full capacity of SVG filter effects. Any valid SVG filter can be created and Filter Effects for Raphael will help you chain effects and apply the results to a Raphael Element.


				var paper = Raphael("example");

				

				var filter = paper.createFilter();

				filter.chainEffect("feTurbulence", {type: "turbulence", baseFrequency: "0.05", numOctaves: "2"});

				filter.merge(filter.getLastResult(), "SourceGraphic");

				filter.chainEffect("feGaussianBlur", {stdDeviation: 1});

				

				var circle = paper.circle(50, 50, 25).attr({fill: "red"});

				circle.filter(filter);

Filter Effects for Raphael is open source software, distributed under the MIT license. So feel free to use it, share it or modify it however you want - even in commercial software.

If you would like to give something back you can contribute on the GitHub page.