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

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