Estoy tratando de recrear esta animación smil con javascript puro

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

El problema aquí es cuando uso setAttribute para recrear la animación al hacer clic, la animación es repentina

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

y no puedo entender cómo hacerlo suave como el smil ¿Hay alguna manera de hacerlo en js puro?