[ Launch: blurrrrrrrrrrrr FILTER fade ] 5422409 by enoex
[ 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/5422409 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 | |
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', | |
width: 800, | |
height: 500, | |
fill: '#336699' | |
}) | |
//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', | |
'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 + circleRadius/2,10); | |
var y = parseInt(d3.event.pageY - 60 - circleRadius,10); | |
x = Math.round(x / (circleRadius/4)) * (circleRadius/4); | |
y = Math.round(y / (circleRadius/4)) * (circleRadius/4); | |
var clip = addMask(x,y); | |
clip.transition().ease('quadratic').duration(3000) | |
.attr({ fill: '#000000' }) | |
.each('end', function(){ this.remove(); }); | |
}; | |
svg.on('touchmove', move); | |
svg.on('mousemove', move); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Mr Egil,
I am trying one of your free templates from W3 Schools, but I am having problems making the Anchors work and open at the top of the page. Can you help me and see what's the problem. Thank you. David
Here is the website.
http://sevensidesstrategies.com