SVG Morphing Quandary-CodePudding

I have two SVGs, I've made completely sure they have exactly the same number of points, and while the bezier curves are not identical, there's the same amount of handles etc. Why oh why are they not morphing? I've spent two days trying to replicate multiple tutorials, to get it to work and all I can manage is them switching without any morphing, I've looked at other answers on here and they just seem to say "the points don't add up", I've checked and rechecked, every curve has a matching curve, if the points don't add up please can you let me know WHY they don't add up? Is it a simple fix or should I just give up and use some morphing api? If so which one?

Codepen here

let infoVisible = false;
const iTransition = document.getElementById("transitionToI");
const xTransition = document.getElementById("transitionToX");

document.getElementById("info").addEventListener("click", () => {
  infoVisible ? iTransition.beginElement() : xTransition.beginElement();
  infoVisible = !infoVisible;
})

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

button {
  background: none;  
  border: none;
  color: white;
  cursor: pointer;
  fill: black ;
  font-family: 'EB Garamond', garamond, serif;
  font-size: 50px;
  font-style: italic;
  font-weight: 600;
  transition: filter 1s;
  width: 100px;
  z-index: 5;
}

<button  id="info" type="button">
  <svg  xmlns="http://www.w3.org/2000/svg" viewBox="5 8 50.94 40.88">
    <path d="M16.27,47.59a4.63,4.63,0,0,1-2.4-1,2.89,2.89,0,0,1-1.3-2.32c0-1.21,1.18-4,2.62-7.14.93-2,2-4.23,2.88-6.29a43.07,43.07,0,0,0,2.32-6.06c.14-.37.05-.56-.28-.56a3.79,3.79,0,0,0-1.33.35,15.82,15.82,0,0,0-1.74.88c-.61.34-1.19.71-1.75,1.08s-.83.34-1.08.17a.79.79,0,0,1-.38-.73,2.61,2.61,0,0,1,.8-1.33,19.63,19.63,0,0,1,2.09-2c.86-.72,1.83-1.45,2.9-2.2s2.14-1.43,3.21-2.06a24.17,24.17,0,0,1,2.94-1.5,2.11,2.11,0,0,1,1.81.14,4.19,4.19,0,0,1,1.47,1.29,1.45,1.45,0,0,1,.28,1.43c-.19.44-.67,1.58-1.62,3.86l-2.16,5.21c-.78,1.9-1.58,3.86-2.29,5.64A54.4,54.4,0,0,0,21,40.81a.63.63,0,0,0,.7.63,2.54,2.54,0,0,0,.74-.12,10.64,10.64,0,0,0,3.35-2.06,37.72,37.72,0,0,0,3.13-3c.09-.09.24-.27.39-.27a.64.64,0,0,1,.49.24.79.79,0,0,1,.21.52,5.27,5.27,0,0,1-1.43,3,24.8,24.8,0,0,1-3.6,3.56,26.24,26.24,0,0,1-4.51,3A9.24,9.24,0,0,1,16.27,47.59Z">
      <animate id="transitionToX" begin="indefinite" fill="freeze" attributeName="d" dur="10s" values="M10.81,42.17A3.12,3.12,0,0,1,7.71,39c0-2.14,2.05-4.69,3.44-4.69.55,0,1,.61,1.33,1.19a1.86,1.86,0,0,0,1.8,1.23,3.81,3.81,0,0,0,2.64-1.37c.59-.65,3.1-3.5,3.74-4.24s1.54-1.81,1.85-2.19a1.74,1.74,0,0,0,.31-1.76c-.26-.95-2.66-9.25-2.8-9.67-.4-1.17-1.14-1.32-2.74,0a18.58,18.58,0,0,0-2.75,3c-.44.58-1.4.67-1.4-.54,0-3.27,4.66-9.1,9.06-9.1,2,0,2.76,1,4,4.4.23.64,1.75,6.18,1.92,6.84s.49.7.95.07,3.93-5.61,4.49-6.34c1.38-1.8,3.73-4.88,7-5a4.35,4.35,0,0,1,4.14,3.64,6.29,6.29,0,0,1-1.93,3.7c-1.43,1.25-2.58.74-3.24-.77-.89-2-3.13-.72-4.41.42a34.1,34.1,0,0,0-5.25,6.7,2.79,2.79,0,0,0-.37,2.67c.21.76,1.89,7,2.13,7.73s.54,1.88,1.59,1.88c1.26,0,3.11-2.5,4.28-4.59.6-1.06,1.56-1,1.56.5,0,2.38-3.83,9.58-8.77,9.58-2.57,0-4.08-1.92-4.84-4.66-.26-.94-1.18-5.51-1.42-6.35s-.41-1-1-.35c-1.35,1.55-3.75,5.55-6,8.12C15.37,40.69,13.41,42.17,10.81,42.17Z"></animate>
      <animate id="transitionToI" begin="indefinite" fill="freeze" attributeName="d" dur="10s" values="M16.27,47.59a4.63,4.63,0,0,1-2.4-1,2.89,2.89,0,0,1-1.3-2.32c0-1.21,1.18-4,2.62-7.14.93-2,2-4.23,2.88-6.29a43.07,43.07,0,0,0,2.32-6.06c.14-.37.05-.56-.28-.56a3.79,3.79,0,0,0-1.33.35,15.82,15.82,0,0,0-1.74.88c-.61.34-1.19.71-1.75,1.08s-.83.34-1.08.17a.79.79,0,0,1-.38-.73,2.61,2.61,0,0,1,.8-1.33,19.63,19.63,0,0,1,2.09-2c.86-.72,1.83-1.45,2.9-2.2s2.14-1.43,3.21-2.06a24.17,24.17,0,0,1,2.94-1.5,2.11,2.11,0,0,1,1.81.14,4.19,4.19,0,0,1,1.47,1.29,1.45,1.45,0,0,1,.28,1.43c-.19.44-.67,1.58-1.62,3.86l-2.16,5.21c-.78,1.9-1.58,3.86-2.29,5.64A54.4,54.4,0,0,0,21,40.81a.63.63,0,0,0,.7.63,2.54,2.54,0,0,0,.74-.12,10.64,10.64,0,0,0,3.35-2.06,37.72,37.72,0,0,0,3.13-3c.09-.09.24-.27.39-.27a.64.64,0,0,1,.49.24.79.79,0,0,1,.21.52,5.27,5.27,0,0,1-1.43,3,24.8,24.8,0,0,1-3.6,3.56,26.24,26.24,0,0,1-4.51,3A9.24,9.24,0,0,1,16.27,47.59Z"></animate>
    </path>
  </svg>
</button>

CodePudding user response：

As @ccprog already said, each of your <animate values=""> attributes needs at least two values. The starting state and the end state. But both of yours have only one value.

Secondly...

I've made completely sure they have exactly the same number of points

Unfortunately that is not enough. They have to have an equal number of path commands, and the commands have to be equivalent also. Yours don't meet that criteria. They might possibly have the same number of points in your editor software. But the output path definitions don't.

Here they are lined up against one another.

M M
a a
a a 
c c
s c 
a a
c c
c a
a a 
c c
c s
c a
c a 
s a 
s c
c s
a a
a a 
c a 
c a 
a c
a l
c c
s A
c a
c a 
c a 
c a 
c c
s a
c a 
C a 
Z a 
  a 
  A
  Z

You'll need to fix both these problems before your animation starts working.