Old school D3 from simpler times

All examples By author By category About

tarekrached

Full window Github gist

Circle Wave

Playing with the parameters of Mike Bostock's Circle Waves :).

Original was inspired by Dave Whyte’s 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 120 + Math.cos(a * 8 - i * 2 * Math.PI / 3 + t) * Math.pow((1 + Math.cos(a - t)) / 2, 3) * 32 * (i + 1);
        });
    });

d3.timer(function () {
    path.attr("d", function (d) {
      return d(angles);
    });
  });

</script>

https://d3js.org/d3.v4.min.js