Tool for working with svg filters
See http://mathisonian.github.io/svg-filter for examples
var d3 = require('d3');
var SvgFilter = require('svg-filter');
var filter = new SvgFilter();
filter
.append('blur')
.attr('stdDeviation', 50);
var size = 200;
d3.select('body')
.append('svg')
.attr('width', size)
.attr('height', size)
.append('rect')
.attr('width', size)
.attr('height', size)
.attr('fill', 'blue')
.attr('filter', filter);
The following are shorthand for the full element names. The links go to mozillas docs which do well to cover all inputs available to each filter type.
'blend'
'blur'
'color'
'component-transfer'
'composite'
'convolve'
'diffuse'
'displacement'
'flood'
'image'
'merge'
'morphology'
'offset'
'specular'
'tile'
'turbulence'
var SVGFilter = require('svg-filter');
var filter = new SVGFilter();
// appends a blur effect
filter
.append('blur')
// sets a parameter on the
// blur effect. see links
// above for more info on
// available attributes
.attr('stdDeviation', 5);
d3selection.attr('filter', filter);
var filter = new SVGFilter();
// send the output of blur
// to the input of offset.
//
filter
.append('blur')
.to('offset')
.attr('dx', 10)
.attr('dx', 10);
var filter = new SvgFilter();
var makeColoredFilter = function(color, dx, dy) {
return filter
.append('flood')
.attr('color', color)
.attr('opacity', 0.5)
// the `to` command creates a
// new 'composite' effect and
// automatically sends the output
// of the flood effect to the input
// of composite.
.to('composite')
.attr('operator', 'in')
.in2('SourceAlpha') // shorthand for attr('in2', 'SourceAlpha')
// again, this automatically wires the
// output of composite to the input of a new
// 'offset' effect
.to('offset')
.attr('dx', dx)
.attr('dy', dy);
};
var red = makeColoredFilter('#ff0000', 0, -12);
var green = makeColoredFilter('#00ff00', 0, -6);
var yellow = makeColoredFilter('#ffff00', 0, 0);
var blue = makeColoredFilter('#0000ff', 0, 6);
filter
.merge(red, green, yellow, blue);