SVG Morphing Quandary

Question

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 class="info display-none" id="info" type="button">
  <svg class="i_x" 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>

`` always needs to list **all** the states of an animation: either the start state of the `d` attribute in a `from` attribute and the end state in a `to`, or both states in a `values` attribute, separated by a semicolon. — ccprog, Jul 30 '22 at 01:27
@Mr.Lupine: If you need a way to normalize your path data for morphing – this answer might be helpful [How to morph svg into another svg correctly with Anime.js?](https://stackoverflow.com/questions/72216247/how-to-morph-svg-into-another-svg-correctly-with-anime-js/72249929#72249929) — herrstrietzel, Jul 31 '22 at 15:22
This is great, thanks both, I think I'll just use anime.js, save myself the breakdown. — Mr.Lupine, Aug 01 '22 at 10:37

score 2 · Accepted Answer · answered Jul 30 '22 at 04:05

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.

Okay, thanks very much! It seems like an impossible task to make the path commands match, how did people do it before tools like anime.js came along? I suppose it could only be done with simple shapes, I was assuming as the two shapes in this example (https://jsbin.com/kirupal/edit?html,css,output) are quite complex, it would be fairly easy! — Mr.Lupine, Aug 01 '22 at 10:36
Try using an editor like Inkscape which uses SVG as its native file format. That way your path segments will match exactly what's on screen. — Paul LeBeau, Aug 02 '22 at 22:23

SVG Morphing Quandary

1 Answers1