Move mouse pointer over the doodles.
Image source: me.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
<title></title> | |
<style type="text/css"> | |
input { | |
position: absolute; | |
bottom: 20px; | |
right: 20px; | |
width: 200px; | |
} | |
</style> | |
</head> | |
<body> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script> | |
<script type="text/javascript"> | |
var svg = d3.select("body").append("svg:svg") | |
.attr("width", 960) | |
.attr("height", 500) | |
.attr("id","svgFrame"); | |
var filter = svg.append("svg:defs") | |
.append("svg:filter") | |
.attr("id", "blur") | |
.append("svg:feGaussianBlur") //try convolve | |
.attr("stdDeviation", 0); | |
d3.xml("mythac.svg", "image/svg+xml", function(xml) { | |
xml.documentElement.id = "mythac"; | |
document.getElementById('svgFrame').appendChild(xml.documentElement); | |
d3.selectAll("path") | |
.attr("filter", "url(#blur)") | |
.on("mouseover", recolour); | |
}); | |
d3.select("body").append("input") | |
.attr("type", "range") | |
.attr("min", 0) | |
.attr("max", 100) | |
.attr("value", 0) | |
.on("change", blur); | |
function blur() { | |
filter.attr("stdDeviation", this.value / 5); | |
} | |
function recolour() { | |
d3.select(this) | |
.transition() | |
.delay(50) | |
.duration(500) | |
.style("fill", function() { | |
return "hsl(" + Math.random() * 360 + ",100%,50%)"; | |
}); | |
} | |
</script> | |
</body> | |
</html> |