Created
March 14, 2017 21:13
-
-
Save Prinzhorn/ae0c654b381e24a06c0af91f2eaf5d77 to your computer and use it in GitHub Desktop.
This file contains 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <svg width="500" height="500"> | |
| <clipPath id="clippy1"></clipPath> | |
| <clipPath id="clippy2"></clipPath> | |
| <clipPath id="clippy3"></clipPath> | |
| <clipPath id="clippy4"></clipPath> | |
| <clipPath id="clippy5"></clipPath> | |
| <clipPath id="clippy6"></clipPath> | |
| <image clip-path="url(#clippy1)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-braun__0176534_PE329336_S4.JPG"></image> | |
| <image clip-path="url(#clippy2)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-beige__0176536_PE329337_S4.JPG"></image> | |
| <image clip-path="url(#clippy3)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-grau__0176538_PE329338_S4.JPG"></image> | |
| <image clip-path="url(#clippy4)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-wei-__0176543_PE329340_S4.JPG"></image> | |
| <image clip-path="url(#clippy5)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-grun__0185128_PE336924_S4.JPG"></image> | |
| <image clip-path="url(#clippy6)" width="500" height="500" y="0" x="0" xlink:href="http://www.ikea.com/de/de/images/products/stockholm-er-sofa-schwarz__0185121_PE336926_S4.JPG"></image> | |
| </svg> | |
| <p><small>Images straight from <a href="http://www.ikea.com/de/de/catalog/products/90245060/">http://www.ikea.com/de/de/catalog/products/90245060/</a></small></p> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var NUM_IMAGES = 6; | |
| var activeIndex = 0; | |
| var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto | |
| var quarter = tau / 4; | |
| var smallPie = (quarter / (NUM_IMAGES - 1)); | |
| var getStartAngle = function(index) { | |
| var angle = (quarter / (NUM_IMAGES - 1)) * index; | |
| if(index > activeIndex) { | |
| angle = angle + 3 * quarter; | |
| } | |
| return angle; | |
| }; | |
| var getEndAngle = function(index) { | |
| if(index === NUM_IMAGES - 1) { | |
| return tau; | |
| } | |
| return getStartAngle((index + 1) % NUM_IMAGES); | |
| }; | |
| // 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 arcs = d3.range(NUM_IMAGES).map(function(index) { | |
| return d3.arc() | |
| .innerRadius(0) | |
| .outerRadius(500); | |
| }); | |
| var paths = d3.range(NUM_IMAGES).map(function(index) { | |
| return d3.select("#clippy" + (index + 1)).append("path") | |
| .datum({ | |
| startAngle: getStartAngle(index), | |
| endAngle: getEndAngle(index) | |
| }) | |
| .style("fill", "black") | |
| .attr("transform", "translate(250, 250)") | |
| .attr("d", arcs[index]) | |
| }); | |
| d3.interval(function() { | |
| activeIndex = (activeIndex + 1) % paths.length; | |
| paths.forEach(function(path, index) { | |
| path.transition() | |
| .duration(1000) | |
| .attrTween("d", arcTween(index)); | |
| }) | |
| }, 2000); | |
| function arcTween(index) { | |
| return function(d) { | |
| var interpolateStart = d3.interpolate(d.startAngle, getStartAngle(index)); | |
| var interpolateEnd = d3.interpolate(d.endAngle, getEndAngle(index)); | |
| return function(t) { | |
| d.startAngle = interpolateStart(t); | |
| d.endAngle = interpolateEnd(t); | |
| return arcs[index](d); | |
| }; | |
| }; | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment