[ 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
-
-
Save erikhazzard/5422491 to your computer and use it in GitHub Desktop.
blurrrrrrrrrrrr FILTER fade
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"blurrrrrrrrrrrr FILTER fade","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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var svg = d3.select("svg") | |
//CLIP | |
var circleRadius = 40; | |
var clips = svg.append('svg:defs') | |
.append('svg:mask') | |
.attr({id: 'mask'}) | |
var addMask = function(x,y){ | |
var clip = clips.append('svg:circle') | |
.attr({ cx: x, cy: y, r: circleRadius, | |
fill: '#ffffff', | |
'class': 'clipCircle'}); | |
return clip; | |
/* | |
var clip = clips.append('svg:path') | |
.attr({ | |
d: 'M0 0 L150 200 L200 0', | |
'stroke-width': '4px', | |
'stroke': '#343434' | |
}); | |
*/ | |
}; | |
//BLUR | |
var defs = svg.append('svg:defs'); | |
var filterBlur = defs.append('svg:filter') | |
.attr({ id: 'blur' }); | |
filterBlur.append('feGaussianBlur') | |
.attr({ | |
'in': "SourceGraphic", | |
'stdDeviation': 5 | |
}); | |
//IMAGE | |
var imageUrl = 'http://i.imgur.com/Lk4L4Pg.jpg'; | |
//var imageUrl = 'http://metteingvartsen.net/wp-content/uploads/Picture-Giant-City_credit-Jan-Egil-Kirkeb%C3%B8.jpg'; | |
svg.append('svg:image') | |
.attr({ | |
x: 0, | |
y: 0, | |
filter: 'url(#blur)', | |
'xlink:href': imageUrl, | |
width: 800, | |
height: 500, | |
fill: '#336699' | |
}) | |
//MASK | |
var mask = svg.append('svg:image') | |
.attr({ | |
x: 0, | |
y: 0, | |
'xlink:href': imageUrl, | |
'mask': 'url(#mask)', | |
width: 800, | |
height: 500, filter: 'url(#blur2)', | |
fill: '#336699' | |
}); | |
//erase on mouse over | |
var move = function(e){ | |
var x = parseInt(d3.event.pageX - 25 + circleRadius/2,10); | |
var y = parseInt(d3.event.pageY - 25 - circleRadius,10); | |
x = Math.round(x / (circleRadius/8)) * (circleRadius/8); | |
y = Math.round(y / (circleRadius/8)) * (circleRadius/8); | |
var clip = addMask(x,y); | |
clip.transition().ease('quadratic') | |
.delay(400).duration(7000) | |
.attr({ fill: '#000000', 'r':0 }) | |
.each('end', function(){this.remove()}) | |
}; | |
svg.on('touchstart', function(e){ | |
e.stopPropagation(); | |
e.preventDefault(); | |
return false; | |
}); | |
svg.on('touchmove', function(e){ | |
e.stopPropagation(); | |
e.preventDefault(); | |
return move(e); | |
}); | |
svg.on('mousemove', move); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment