mouse_circle

_.md

[ Launch: mouse_circle ] 4744183 by antulik

config.json

{"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}

inlet.js

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();
}

style.css

body {
  background: #222;
}

circle {
  fill: none;
  stroke-width: 1.5px;
}