Last active
September 14, 2015 11:24
-
-
Save iainkirkpatrick/9b38683bc3109a7f92d7 to your computer and use it in GitHub Desktop.
eighty logo be trippin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>animatEIGHTY</title> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| width: 960px; | |
| height: 500px; | |
| position: relative; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script charset="utf-8"> | |
| var width = 960, | |
| height = 500, | |
| τ = 2 * Math.PI; // http://tauday.com/tau-manifesto | |
| // An arc function with all values bound except the endAngle. So, to compute an | |
| // SVG path string for a given angle, we pass an object with an endAngle | |
| // property to the `arc` function, and it will return the corresponding string. | |
| var arc = d3.svg.arc() | |
| .innerRadius(0) | |
| .outerRadius(120) | |
| .startAngle(0.125 * τ); | |
| //.endAngle(60); | |
| var zeroArc = d3.svg.arc() | |
| .innerRadius(0) | |
| .outerRadius(200) | |
| .startAngle(0); | |
| //.endAngle(60); | |
| // Create the SVG container, and apply a transform such that the origin is the | |
| // center of the canvas. This way, we don't need to position arcs individually. | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var eight = svg.append("g") | |
| .attr("transform", "translate(" + width / 3 + "," + height / 2 + ")") | |
| // Add the background arc, from 0 to 100% (τ). | |
| var eightTop = eight.append("path") | |
| .datum({endAngle: .875 * τ}) | |
| .style("fill", "#ddd") | |
| .attr("transform", "translate(" + 0 + "," + -(85) + ") rotate(180)") | |
| //.attr("transform", "") | |
| .attr("d", arc); | |
| var eightBottom = eight.append("path") | |
| .datum({endAngle: .875 * τ}) | |
| .style("fill", "#ddd") | |
| .attr("transform", "translate(" + 0 + "," + 85 + ")") | |
| .attr("d", arc); | |
| var zero = svg.append("g") | |
| .attr("transform", "translate(" + ((width / 3) * 2) + "," + height / 3 + ")"); | |
| zero.append("path") | |
| .datum({endAngle: τ}) | |
| .style("fill", "#ddd") | |
| .attr("transform", "translate(" + 0 + "," + 85 + ")") | |
| .attr("d", zeroArc); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment