Skip to content

Instantly share code, notes, and snippets.

@bennpearson

bennpearson/index.html

Created January 27, 2018 18:51
Show Gist options
  • Save bennpearson/b013aad00ecf848c39ef8a0ee5c2f5f0 to your computer and use it in GitHub Desktop.
Save bennpearson/b013aad00ecf848c39ef8a0ee5c2f5f0 to your computer and use it in GitHub Desktop.
Download ZIP
Wave 2 - Circle
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<svg id="svg1" width="960" height="500">
</svg>
<svg id="svg2" width="960" height="500">
</svg>
<svg id="svg3" width="960" height="500">
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("#svg1")
, width = +svg.attr("width")
, height = +svg.attr("height")
, angles = d3.range(0, 2 * Math.PI, Math.PI / 100);
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(["magenta"]).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 * 1 * Math.PI / 3 + t) * Math.pow((1 + Math.cos(a - t)) / 2, 3) * 32;
});
});
var svg2 = d3.select("#svg2")
, width2 = +svg.attr("width")
, height2 = +svg.attr("height")
, angles2 = d3.range(0, 2 * Math.PI, Math.PI / 100);
var path2 = svg.append("g").attr("transform", "translate(" + width2 / 2 + "," + height2 / 2 + ")").attr("fill", "none").attr("stroke-width", 10).attr("stroke-linejoin", "round").selectAll("path").data(["cyan"]).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 * 1 * Math.PI / 3 + t) * Math.pow((0.9 + Math.cos(a - t)) / 2, 3) * 32;
});
});
var svg3 = d3.select("#svg3")
, width3 = +svg.attr("width")
, height3 = +svg.attr("height")
, angles3 = d3.range(0, 2 * Math.PI, Math.PI / 100);
var path3 = svg.append("g").attr("transform", "translate(" + width3 / 2 + "," + height3 / 2 + ")").attr("fill", "none").attr("stroke-width", 10).attr("stroke-linejoin", "round").selectAll("path").data(["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 * 1 * Math.PI / 3 + t) * Math.pow((0.8 + Math.cos(a - t)) / 2, 3) * 32;
});
});
d3.timer(function() {
path.attr("d", function(d) {
return d(angles);
});
path2.attr("d", function(d) {
return d(angles2);
});
path3.attr("d", function(d) {
return d(angles3);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment