I trying to recreate this smil animation with pure javascript

<svg viewBox="0 0 600 600">
<path id="foo" d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="black">
  <animate
       attributeName="d"  to="M500 500 C 20 20, 40 20, 50 10"
       dur="5s" repeatCount="indefinite" />
  </path>
</svg>

The problem here is when I use setAttribute to recreate the animation on click the animation is sudden

var path = document.getElementById('foo');
path.addEventListener("click", function(){path.setAttribute('d','M500 500 C 20 20, 40 20, 50 10');});

and I can't figure out how to make it smooth like the smil Is there a way to make it in pure js ?