svg animation js

<svg id="svg" xmlns="http://www.w3.org/2000/svg"></svg>
<script>
function f(x, y) {
  var svg = document.getElementById('svg');

  var circle = document.createElementNS(svg.namespaceURI, 'circle');
  circle.setAttribute('cx', x);
  circle.setAttribute('cy', y);
  circle.setAttribute('r', '50');

  var animation = document.createElementNS(svg.namespaceURI, 'animateMotion');
  var path = 'm 0,0 l ' + (x + 500) + ',0'
  animation.setAttribute('path', path);
  animation.setAttribute('dur', '1s');
  animation.setAttribute('repeatCount', 'indefinite');
  circle.appendChild(animation);

  svg.appendChild(circle);
}

f(50, 50);
</script>