D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
seemantk
Full window
Github gist
75 Years of Batman logos
<!DOCTYPE html> <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