Inspired by Dave Whyte’s circle wave.
forked from mbostock's block: Circle Wave
forked from noblemillie's block: Circle Wave
xxxxxxxxxx
<svg width="550" height="500"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
d3.select("body")
// .style("background-color", "lightyellow")
// .style("background-color", "lightgrey")
.style("background-color", "snow")
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
angles = d3.range(0, 2 * Math.PI, Math.PI / 200);
var visits = 24;
var path = svg.append("g")
.attr("transform", "translate(" + width / 3 + "," + height / 3 + ")")
// .attr("fill", "black")
.attr("stroke-width", 12)
.attr("stroke-linejoin", "round")
.selectAll("path")
// .data(["red", "purple", "deeppink"])
.data(["cornflowerblue", "aqua", "navy"])
.enter().append("path")
.attr("stroke", function(d) { return d; })
// .style("mix-blend-mode", "multiply")
.style("mix-blend-mode", "darken")
// .attr("fill", "steelblue")
.attr("fill", "lightcyan")
.attr("opacity", 0.4)
.datum(function(d, i) {
return d3.radialLine()
.curve(d3.curveLinearClosed)
.angle(function(a) { return a; })
.radius(function(a) {
var t = d3.now() / 1800;
return 120 + Math.cos(a * 5 - i * 2 * Math.PI / 4 + t) * Math.pow((1 + Math.cos(a - t)) / 3, 3) * 48;
});
});
d3.timer(function() {
path.attr("d", function(d) {
return d(angles);
});
});
svg.append("text")
.attr("font-size", 120)
.attr("font-family", "Papyrus,fantasy")
.attr("font-weight", 500)
.attr("stroke", "black")
.attr("stroke-width", 1.5)
// .attr("fill", "white")
.attr("fill", "navy")
// .attr("fill", "aquamarine")
.attr("text-anchor", "middle")
.attr("opacity", 0.8)
.text(visits)
.attr("transform", "translate(" + width / 3 + "," + height / 2.5 + ")")
</script>
https://d3js.org/d3.v5.min.js