Skip to content

Instantly share code, notes, and snippets.

@neon-ninja

neon-ninja/d3_circles.html

Created May 11, 2021 06:31
Show Gist options
  • Save neon-ninja/993d4712d113db4239e79d9160cbb306 to your computer and use it in GitHub Desktop.
Save neon-ninja/993d4712d113db4239e79d9160cbb306 to your computer and use it in GitHub Desktop.
Download ZIP
circle animation
Raw
d3_circles.html
<html>
<head>
<style>
html,
body,
svg {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<svg id="circles"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
<script>
var svg = d3.select("#circles");
d3.interval(function () {
var x = Math.random() * parseInt(svg.style("width"));
var y = Math.random() * parseInt(svg.style("height"));
//console.log("Spawning circle at " + x + "," + y);
svg
.append("circle")
.attr("cx", x)
.attr("cy", y)
.attr("r", 0)
.style("opacity", 0.2)
.transition()
.duration(10000)
.style("opacity", 0)
.attr("r", 500)
.on("end", function () {
this.remove();
});
}, 1000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment