Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active October 23, 2019 21:15
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save mbostock/2d466ec3417722e3568cd83fc35338e3 to your computer and use it in GitHub Desktop.
Save mbostock/2d466ec3417722e3568cd83fc35338e3 to your computer and use it in GitHub Desktop.
Circle Wave
license: gpl-3.0
border: no
redirect: https://observablehq.com/@mbostock/circle-wave
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
angles = d3.range(0, 2 * Math.PI, Math.PI / 200);
var path = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.attr("fill", "none")
.attr("stroke-width", 10)
.attr("stroke-linejoin", "round")
.selectAll("path")
.data(["cyan", "magenta", "yellow"])
.enter().append("path")
.attr("stroke", function(d) { return d; })
.style("mix-blend-mode", "darken")
.datum(function(d, i) {
return d3.radialLine()
.curve(d3.curveLinearClosed)
.angle(function(a) { return a; })
.radius(function(a) {
var t = d3.now() / 1000;
return 200 + Math.cos(a * 8 - i * 2 * Math.PI / 3 + t) * Math.pow((1 + Math.cos(a - t)) / 2, 3) * 32;
});
});
d3.timer(function() {
path.attr("d", function(d) {
return d(angles);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment