bouncy-ball by fil

index.html

<!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>