Skip to content

Instantly share code, notes, and snippets.

@antulik antulik/_.md
Created Feb 9, 2013

Embed
What would you like to do?
mouse_circle
{"description":"mouse_circle","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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}
var z = d3.scale.category20a(),
i = 0;
var svg = d3.select("svg")
.style("pointer-events", "all")
.on("mousemove", particle);
function particle() {
var m = d3.mouse(this);
svg.append("svg:circle")
.attr("cx", m[0])
.attr("cy", m[1])
.attr("r", 1e-6)
.style("stroke", z(++i))
.style("stroke-opacity", 1)
.transition()
.duration(2000)
.ease(Math.sqrt)
.attr("r", 100)
.style("stroke-opacity", 1e-6)
.remove();
}
body {
background: #222;
}
circle {
fill: none;
stroke-width: 1.5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.