blurrrrrrrrrrrr

_.md

[ Launch: Tributary inlet ] 5417941 by enoex

config.json

{"description":"blurrrrrrrrrrrr","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var svg = d3.select("svg")
.attr({
  
  
});

//CLIP
var clip = svg.append('svg:defs')
.append('svg:clipPath')
	.attr({id: 'clip'})
.append('svg:path')
	.attr({
  		d: 'M0 0 L150 200 L200 0',
      'stroke-width': '4px',
      'stroke': '#343434'
	});


var groupPath = function(d) {
    return "M" + 
      d3.geom.hull(d.values.map(function(i) { return [i.x, i.y]; }))
        .join("L")
    + "Z";
};

console.log(groupPath);

//RECT
//BLURRED RECT
svg.append('svg:image')
.attr({
  x: 0,
  y: 0,
  filter: 'url(#blur)',
  'xlink:href': 'http://metteingvartsen.net/wp-content/uploads/Picture-Giant-City_credit-Jan-Egil-Kirkeb%C3%B8.jpg',
  //'clip-path': 'url(#clip)',
  width: 800,
  height: 500,
  fill: '#336699'
})

//BLUR
var defs = svg.append('svg:defs');
var filterBlur = defs.append('svg:filter')
	.attr({ id: 'blur' });

filterBlur.append('feGaussianBlur')
		.attr({
      		'in': "SourceGraphic",
      		'stdDeviation': 5
		});


//MASK
var mask = svg.append('svg:image')
.attr({
  x: 0,
  y: 0,
  'xlink:href': 'http://metteingvartsen.net/wp-content/uploads/Picture-Giant-City_credit-Jan-Egil-Kirkeb%C3%B8.jpg',
  'clip-path': 'url(#clip)',
  width: 800,
  height: 500, filter: 'url(#blur2)',
  fill: '#336699'
})

svg.on('mousemove', function(e){
  clip.attr({
    transform: 'translate(' + [
      d3.event.pageX - 90,
      d3.event.pageY - 120
      ] + ')'
  });
});