forked from seemantk's block: 75 Years of Batman logos
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>I'm...Batman</title>
</head>
<body>
<svg width="900" height="600" viewBox="0 0 150 100">
<path id="batlogo"></path>
</svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
d3.xml("batman-logos.svg")
.then(mainfn)
;
d3.select("body")
.style("background-color", "yellow")
;
function mainfn(xml) {
var paths = Array.from(xml.getElementsByTagName('path'))
.map(d => d.getAttribute('d'))
.reverse()
;
d3.select("path#batlogo")
.call(animate)
;
function animate(sel) {
var start = paths.shift()
, end = paths[0];
paths.push(start);
sel.datum({start, end})
.transition()
.duration(1500)
.ease(d3.easeQuad)
.attrTween("d", function(d) {
return d3.interpolate(d.start, d.end);
})
.on("end", function() { sel.call(animate); });
} // animate()
} // mainfn()
</script>
https://d3js.org/d3.v5.min.js