D3 Examples - Blur / Fade Filter Effect

xxxxxxxxxx
 
<html>
<head>
    <meta charset="utf-8">
  <style>
  </style>
</head>
<body align=left>
  
<h1>Mirror Mirror On the Wall Who is the Fairest of All ?</h1>
​
<svg id="svgMain" align="center" width="800" height="800">
  <image width="800" height="800" xlink:href="https://secure.img2-fg.wfcdn.com/lf/maxsquare/hash/31494/26671043/1/Hickory-Manor-House-Royal-Crown-Mirror.jpg"  />
​
</svg>
​
  
  
  
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
        //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")
​
//Config
var circleRadius = 100;
var blurAmount = 60;
var clipDelay = 400;
var clipDuration = 5000;
var clipEase = 'circle'; //quad and circle look good
​
//CLIP
var clips = svg.append('svg:defs')
    .append('svg:mask')
    .attr({id: 'mask'});
      
​
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/2, 
            fill: '#ffffff',
            'class': 'clipCircle'
        });
  return clip;
};
​
//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
​
      imageUrl = "https://www.iextrading.com/apple-touch-icon.png"
​
//Add blurred image
svg.append('svg:image')
    .attr({
      x: 90,
      y: 300,
      filter: 'url(#blur)',
      'xlink:href': imageUrl,
      width: 600,
      height: 220,
      fill: '#336699'
    })
​
​
​
//MASK
//  Add masked image (regular, non blurred image which will be revealed
var mask = svg.append('svg:image')
    .attr({
        x: 90,
        y: 300,
        'xlink:href': imageUrl,
        'mask': 'url(#mask)',
        width: 600,
        height: 220, filter: 'url(#blur2)',
        fill: '#336699'
    });
​
var mouseMove = function move(e){
    //erase on mouse over
    var x = parseInt(d3.event.pageX - 5 + circleRadius/2,10);
    var y = parseInt(d3.event.pageY - 5 - 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);
​
    </script>
</body>
</html>
    