Morph SVG with SVG or CSS transition

Question

I'm struggling to make an animation work. I've created two SVG shapes in Illustrator with the same amount of path points. Now i want to code a morphing animation. My first try was an animate object as suggested here:

I got an animation, but it didn't morph but instantly switch to the second path.

My next approach was a css animation like this:

#pfad {
  d: path('M195,369.4c-48.4-78-140.4-118.3-182.3-200.3C-3.8,131.7-6.1,85,17.2,50C57.9-16,157.7-15.8,199.1,49.4c32.3-51.6,107.8-65.7,155.7-27.5c54.5,39.2,53.8,119.8,15.8,170.4c-49,65.4-124.1,107-167.6,177.1H195z');
  transition: 1s;
}

This didn't work either. I even got an 'Unknown property: d' error in VS Code and Chrome:

It would be nice if someone could help me get this working.

Edit: The anchor points are in the right position now i guess, but i still have the same problem. New anchor points:

```

user_322084 · Answer

Like the comments suggest, it is a good idea to be precise with the point in the path. So, your code is ok. It is just the path that need a helping hand.

I copied your path to Inkscape and make the two shapes there.

path {
  fill: red;
}

user_7394871 · Answer

The main condition for the implementation of smooth animation path changes
using the attribute d are:

Equal number of nodes in both shapes
Exact match of the node type (A; C; Q), respectively, for each point in the initial and final position of the path These conditions can be met in different ways, but it is better to do this in the vector editor.

You must have the same number of node points by the heart and the circle

Below is a screenshot from Inkscape. Drag matching points from the outline of the heart to the outline of the circle

@chrwahl did this work in his answer while solving this problem
All credits to @chrwahl for a job well done

@jayjay9601 comments

I'll definitely try that even though i would prefer the html/css-only version

Below is the complete CSS animation code using the d attribute:

.svgspan {
width:30vw;
height:30vh;
}
#pfad{
  fill: crimson;
  transition: all 1s ease-in-out;
}
#pfad:hover {
d: path("M 500,1000 C 420,820 0,600 0,300 0,0 380,-120 500,150 620,-120 1000,0 1000,300 c 0,300 -420,520 -500,700 z"); 
fill: red;
}

Morph SVG with <animate> SVG or CSS transition

2 Answers