Skip to content

Instantly share code, notes, and snippets.

@mbostock mbostock/.block
Last active Feb 20, 2019

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

commented Mar 17, 2014

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
You can’t perform that action at this time.