How to animate SVG with JS?

Question

JavaScript

Hello people please help me I will be very grateful. I got acquainted with the D3 and JS libraries quite a bit and decided to animate.

// метод с помощью d3
d3.selectAll("#path174").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("d", "M -4.4168294,12.619513 C 37.128171,46.659513 18.208,69.72 0.579,83.292 1.584,82.519 8.93,97.713 9.816,98.809 c 5.736,7.096 14.534,6.688 22.596,5.119 10.546,-2.052 21.986,-4.301 32.746,-3.953 3.667,0.118 2.944,-3.565 6.468,-4.91 2.391,-0.912 3.538,-6.218 3.035,-9.463 -2.638,-17.104 -3.521829,-84.2304874 -52.300829,-97.066487 -29.5550004,-7.778 -51.055,4.1919996 -26.7770004,24.084");

  // метод с помощью animate
  var cssProperties = anime({
  targets: '#bloks1 #path174',
  d:"M -4.4168294,12.619513 C 37.128171,46.659513 18.208,69.72 0.579,83.292 1.584,82.519 8.93,97.713 9.816,98.809 c 5.736,7.096 14.534,6.688 22.596,5.119 10.546,-2.052 21.986,-4.301 32.746,-3.953 3.667,0.118 2.944,-3.565 6.468,-4.91 2.391,-0.912 3.538,-6.218 3.035,-9.463 -2.638,-17.104 -3.521829,-84.2304874 -52.300829,-97.066487 -29.5550004,-7.778 -51.055,4.1919996 -26.7770004,24.084",
  duration: 3000,
   offset: 0,
  easing: 'linear'
});

That one thing that another gives one result, the animation is crooked and I'm missing something and I don't understand, please help me figure it out.
That's what happens, I throw step-by-step pictures
, first the norms

, then the animation goes on and this is what happens

and then everything is as it should be

Answer 1

please throw your example into the sandbox.