D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Fil
Full window
Github gist
bouncy-ball
Built with
blockbuilder.org
for
bouncy-ball
.
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;background:black; } circle { fill: lime; } </style> </head> <body> <script> var svg = d3.select("body").append("svg") .attr("width", 200) .attr("height", 400) .append('g') .attr('transform', 'translate(100,76)'); var ball = svg.append("circle") .attr('r', 25); bounce(); function bounce() { ball .transition() .duration(575) .ease(d3.easeQuadIn) .attr('cy', 260) .transition() .duration(575) .ease(d3.easeQuadOut) .attr('cy', 0) .on('end', bounce); } </script> </body>
https://d3js.org/d3.v4.min.js