forked from mbostock's block: Circle Wave
and nbremer's block: Gooey Collision Detection
license: gpl-3.0 | |
border: no |
forked from mbostock's block: Circle Wave
and nbremer's block: Gooey Collision Detection
<!DOCTYPE html> | |
<svg width="960" height="500"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var svg = d3.select("svg"), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"), | |
angles = d3.range(0, 2 * Math.PI, Math.PI / 200); | |
var defs = svg.append("defs"); | |
var filter = defs.append("filter").attr("id","gooeyCodeFilter"); | |
filter.append("feGaussianBlur") | |
.attr("in","SourceGraphic") | |
.attr("stdDeviation","5") | |
//to fix safari: http://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image | |
.attr("color-interpolation-filters","sRGB") | |
.attr("result","blur"); | |
filter.append("feColorMatrix") | |
.attr("in","blur") | |
.attr("mode","matrix") | |
.attr("values","1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7") | |
.attr("result","gooey"); | |
var path = svg.append("g") | |
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") | |
.attr("fill", "none") | |
.style("filter", "url(#gooeyCodeFilter)") | |
.attr("stroke-width", 15) | |
.attr("stroke-linejoin", "round") | |
.selectAll("path") | |
.data(["#007f7e", "#ffab00", "#ff6500"]) | |
.enter().append("path") | |
.attr("stroke", function(d) { return d; }) | |
.style("mix-blend-mode", "darken") | |
.datum(function(d, i) { | |
return d3.radialLine() | |
.curve(d3.curveLinearClosed) | |
.angle(function(a) { return a; }) | |
.radius(function(a) { | |
var t = d3.now() / 1000; | |
return 200 + Math.cos(a * 8 - i * 2 * Math.PI / 3 + t) * Math.pow((1 + Math.cos(a - t)) / 2, 3) * 32; | |
}); | |
}); | |
d3.timer(function() { | |
path.attr("d", function(d) { | |
return d(angles); | |
}); | |
}); | |
</script> |
���� JFIF 8 8 ��@ICC_PROFILE 0appl mntrRGB XYZ � -acspAPPL APPL �� �-appl desc P bdscm � cprt � #wtpt � rXYZ gXYZ bXYZ , rTRC @ aarg L vcgt l 0ndin � >chad � ,mmod (bTRC @ gTRC @ aabg L aagg L desc Display mluc " |