Skip to content

Instantly share code, notes, and snippets.

@Prinzhorn
Created March 14, 2017 21:13
Show Gist options
  • Save Prinzhorn/ae0c654b381e24a06c0af91f2eaf5d77 to your computer and use it in GitHub Desktop.
Save Prinzhorn/ae0c654b381e24a06c0af91f2eaf5d77 to your computer and use it in GitHub Desktop.
<!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