svg-filter

Tool for working with svg filters

See http://mathisonian.github.io/svg-filter for examples

!random filters

example

``js

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);

`

filter primitives

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'


API usage

$3

#### 1. Create a new filter

`js
var SVGFilter = require('svg-filter');
var filter = new SVGFilter();
`

#### 2. Add effects to the filter

`js

// 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);
`

#### 3. Attach the filter to a d3 selection

`js

d3selection.attr('filter', filter);
`




$3

#### Chain two effects together

`js
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);

`

#### Merge separate effects


`js
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);
``