Interpolate and animate two svg path

Question

I have two svg path curves that I want to animate. I want that in 5 seconds dPathBefore becomes dPathNow with a smooth animation transition.

<

Answer 1

The d attribute for the paths has to have the same commands. I've rewritten your paths and now it works. I hope this helps.

svg{border:1px solid; width:100vh}

<svg viewBox = "30 120 400 250">

  <path d="M50.000, 350.000 
          C116.667, 116.667 166.667, 83.333 200.000, 250.000 
          C233.333, 316.667 266.667, 316.667 300.000, 250.000 
          C350.000, 200.000 450.000, 250.000 400.000, 350.000 Z">
  <animate
    dur='5s'
    attributeType="XML"
    attributeName='d'      
    repeatCount='indefinite'
    
           values="M50.000, 350.000 
          C116.667, 116.667 166.667, 83.333 200.000, 250.000 
          C233.333, 316.667 266.667, 316.667 300.000, 250.000 
          C350.000, 200.000 450.000, 250.000 400.000, 350.000 Z;
                   
          M50.000, 350.000 
          C50.000, 150.000 150.000, 150.000 250.000, 300.000 
          C300.000, 150.000 400.000, 150.000 400.000, 349.999 
          C400.000, 349.999 400.000, 350.000 400.000, 350.000 Z;
                   
           M50.000, 350.000 
          C116.667, 116.667 166.667, 83.333 200.000, 250.000 
          C233.333, 316.667 266.667, 316.667 300.000, 250.000 
          C350.000, 200.000 450.000, 250.000 400.000, 350.000 Z"
  />
    
    <animate 
             attributeName="fill"
             dur="5s" 
             repeatCount="indefinite"
             values="red;gold;red"
    />
             
    </path>
 
    <!--
<path id='PathBefore' d= 'M 50 350 Q 150 0 200 250 Q 250 350 300 250 C 350 200 450 250 400 350 Z'/>
<path  id='PathNow' d= 'M 50 350 C 50 150 150 150 250 300 C 300 150 400 150 400 350 Z'/>-->   

</svg>

UPDATE

The OP updated their question so I'm updating my answer: I see those paths are practically polylines. Apparently the only command used apart of M and Z is L

In this case the simplest way to achieve what you want would be by programming those paths to have the same number of points.

If this is not possible, the easier way would be by reducing the number of points of the first path (from 80 t0 68). For this you need to split the d string into an array of points path.split("L") and remove every 6th or so. Next you join the points back into a string to be used as a d attribute.

An other way would be adding points to the second path (from 68 to 80). To do this you will need to split the d string into an array of points, and every n points you need to add a point in between. Then again you join the points back into a string to be used as a d attribute or for the values attribute.