D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jbelmont
Full window
Github gist
circle transitions
Built with
blockbuilder.org
<!DOCTYPE html> <meta charset="utf-8"> <style> circle { fill: #333; } </style> <svg width="960" height="500"> <circle cx="480" cy="250" r="200"/> </svg> <script src="//d3js.org/d3.v4.min.js"></script> <script> setInterval(function() { d3.select("circle") .style("fill", d3.hcl(Math.random() * 360, 100, 50)) .transition() .duration(1000) .delay(1000) .style("fill", function() { var that = d3.select(this), fill0 = that.style("fill"), fill1 = that.style("fill", null).style("fill"); that.style("fill", fill0); return fill1; }) .transition() .duration(750) .attr('cx', 700) .attr('cy', 800) .attr('r', 200); d3.select("circle") .attr("cx", 480) .attr("cy", 250) .attr("r", 200) .transition() .attr("r", 50) .duration(2000) }, 2500); </script>
https://d3js.org/d3.v4.min.js