D3 Examples - Pong - infinite transition

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    svg {
      background-color: #4d4d4d;
      width: 200px;
      height: 200px;
    }
    circle {
      fill: #b2182b;
    }
  </style>
</head>
<body>
<svg></svg>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script type="text/javascript">
  var circle = d3.select("svg")
                 .append("circle")
                 .attr("cx", 190)
                 .attr("cy", 100)
                 .attr("r", 10)
​
  d3.interval(function(elapsed) {
    circle.transition()
          .attr("cx", 95)
          .attr("cy", 190)
          .transition()
          .attr("cx", 10)
          .attr("cy", 100)
          .transition()
          .attr("cx", 95)
          .attr("cy", 10)
          .transition()
          .attr("cx", 190)
          .attr("cy", 100)
    }, 1000);
</script>
</html>
    