mathisonian / svg-filter

Tool for working with svg filters

svg-filter

Tool for working with svg filters

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

example

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

Basic

1. Create a new filter

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

2. Add effects to the filter

// 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

d3selection.attr('filter', filter);

Advanced

Chain two effects together

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

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