| 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.
forked from mbostock's block: OMG Particles!
forked from linnnes's block: OMG Particles!
forked from Thanaporn-sk's block: OMG Particles!
| <!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> |