Blur / Fade Effect

_.md

[ Launch: Blur / Fade Effect ] 095cf3523279341f514e by enoex
[ Launch: Blur Fade Effect ] 5584636 by enoex
[ Launch: blurrrrrrrrrrrr FILTER fade ] 5584493 by enoex
[ Launch: blurrrrrrrrrrrr FILTER fade ] 5422491 by enoex
[ Launch: blurrrrrrrrrrrr FILTER fade ] 5422471 by enjalot
[ Launch: blurrrrrrrrrrrr FILTER circle ] 5422321 by enoex
[ Launch: blurrrrrrrrrrrr FILTER ] 5418074 by enoex
[ Launch: blurrrrrrrrrrrr FILTER ] 5418024 by enoex
[ Launch: Tributary inlet ] 5417941 by enoex

config.json

{"description":"Blur / Fade Effect","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,"ajax-caching":true,"thumbnail":"http://i.imgur.com/WyvO5G7.png"}

inlet.js

//Overview: There are two images, one blurred and one not blurred.
//  To acheive the unblur effect, a clipping mask with a bunch of circles
//  is used on the blurred image. 
var svg = d3.select("svg")

var width = 450;
var height = 300;

//Config
var circleRadius = 40;
var blurAmount = 17;
var clipDelay = 200;
var clipDuration = 6000;
var clipEase = 'quad'; //quad and circle look good

//CLIP
var clips = svg.append('svg:defs')
    .append('svg:mask')
    .attr({id: 'mask'});

//Blur filter
var defs = svg.append('svg:defs');
var filterBlur = defs.append('svg:filter')
	.attr({ id: 'blur' });
filterBlur.append('feGaussianBlur')
		.attr({
      		'in': "SourceGraphic",
      		'stdDeviation': blurAmount
		});

//IMAGE
var imageUrl = 'https://s3.amazonaws.com/vasir-assets/svg-filters/gollum.jpg';

//Add blurred image
svg.append('svg:image')
    .attr({
      x: 0,
      y: 0,
      filter: 'url(#blur)',
      'xlink:href': imageUrl,
      width: width,
      height: height,
      fill: '#336699'
    })

//MASK
//  Add masked image (regular, non blurred image which will be revealed
var mask = svg.append('svg:image')
    .attr({
        x: 0,
        y: 0,
        'xlink:href': imageUrl,
        'mask': 'url(#mask)',
        width: width,
        height: height, 
        filter: 'url(#blur2)',
        fill: '#336699'
    });

var addMask = function addMask(x,y){
    //To achieve the unblur effect, we add circles to the clip mask
    var clip = clips.append('svg:circle')
        .attr({ 
            cx: x, 
            cy: y, 
            r: circleRadius, 
            fill: '#ffffff',
            'class': 'clipCircle'
        });
  return clip;
};

var lastMove = new Date();
var mouseMove = function move(e){
    //erase on mouse over
    if(new Date() - lastMove < 18){ return false; }
    lastMove = new Date();

    var x = parseInt(d3.event.pageX - 25 + circleRadius/2,10);
    var y = parseInt(d3.event.pageY - circleRadius,10);

    //Add mask
    var clip = addMask(x,y);

    clip.transition().ease(clipEase)
        .delay(clipDelay)
        .duration(clipDuration)
        .attr({ 
            fill: '#000000', 
            r: 0
        })
        .each('end', function end(){
            this.remove();
        })

};

//attach event
svg.on('mousemove', mouseMove);