Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active November 15, 2019 12:02
  • Star 7 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mbostock/1062544 to your computer and use it in GitHub Desktop.
OMG Particles!
license: gpl-3.0

Mouseover to make particles. Built with D3. I’ve written a slight newer version that creates particles continuously via d3.timer rather than on mouseover. So, check that out.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 0;
background: #222;
min-width: 960px;
}
rect {
fill: none;
pointer-events: all;
}
circle {
fill: none;
stroke-width: 2.5px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = Math.max(960, innerWidth),
height = Math.max(500, innerHeight);
var i = 0;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("width", width)
.attr("height", height)
.on("ontouchstart" in document ? "touchmove" : "mousemove", particle);
function particle() {
var m = d3.mouse(this);
svg.insert("circle", "rect")
.attr("cx", m[0])
.attr("cy", m[1])
.attr("r", 1e-6)
.style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
.style("stroke-opacity", 1)
.transition()
.duration(2000)
.ease(Math.sqrt)
.attr("r", 100)
.style("stroke-opacity", 1e-6)
.remove();
d3.event.preventDefault();
}
</script>
@cmgerber
Copy link

Did you mean to use Math.min instead of Math.max for the width and height?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment