Interpolate and animate two svg path

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.

That is my code:

const dPathBefore = 'M 50 350 Q 150 0 200 250 Q 250 350 300 250 C 350 200 450 250 400 350 Z'
const dPathNow = 'M 50 350 C 50 150 150 150 250 300 C 300 150 400 150 400 350 Z'

export class PathAnimation extends React.Component {
  render() {
    return (
      <svg width={500} height={400} className={'ba b--black'}>
        <path d={dPathBefore} fill={'cyan'} fillOpacity={0.5} />
        <path d={dPathNow} fill={'red'} fillOpacity={0.5} />
      </svg>
    )
  }
}

I read that article and I tried to do that:

<path d={dPathBefore}>
  <animate
    dur={'5s'}
    repeatCount={'indefinite'}
    attributeName={'d'}
    values={`${dPathNow};${dPathBefore};${dPathNow};`}
  />
</path>

That produce:

The result is not acceptable to me. The red curve is expected to become the blue one in a slow way. There should be an interpolation between the two so they have been to animated. I have never done a thing similar to that so I don't know where to start.

I have no preference on how to do this. I can use Javascript, CSS, SVG, ...

Thanks to anyone who wants to help me

A two possible paths are:

M504,217.96837758046047L489.59781879350896,217.05585884731812L470.86363307560316,214.2021740591243L455.24935650686257,209.88898669246805L442.67616275831006,204.52579180948993L432.5944768620284,198.43751290445206L424.4076807324568,191.85175297774788L417.62321391335945,184.92109353338404L411.87012300262165,177.7474756349613L406.876559933356,170.40012929754275L402.4429368598935,162.92731775668844L398.4201589437205,155.36378367845086L394.693739903777,147.73548290048342L391.1725185650579,140.06266051775228L387.78055397450754,132.3619264061584L384.4510660137251,124.6477375137062L381.1215780529427,116.933548621254L377.72961346239236,109.2328145096601L374.2083921236733,101.55999212692899L370.4819730837299,93.93169134896155L366.4591951675568,86.36815727072396L362.0255720940944,78.89534572986962L357.03200902482877,71.54799939245105L351.278918114091,64.37438149402831L344.4944512949937,57.443722049664444L336.30765516542243,50.85796212296023L326.2259692691408,44.76968321792228L313.65277552058853,39.40648833494413L298.03849895184834,35.09330096828778L279.3043132339424,32.23961618009379L258.451066013725,31.2327292526072L237.59781879351084,32.23961618009349L218.8636330756046,35.09330096828717L203.2493565068637,39.40648833494333L190.67616275831108,44.76968321792134L180.5944768620291,50.857962122959165L172.40768073245744,57.443722049663336L165.62321391335996,64.37438149402718L159.87012300262202,71.54799939244992L154.8765599333564,78.8953457298685L150.4429368598938,86.36815727072283L146.4201589437207,93.93169134896044L142.69373990377724,101.55999212692791L139.1725185650581,109.23281450965906L135.7805539745077,116.93354862125298L132.4510660137253,124.64773751370521L129.12157805294288,132.36192640615744L125.72961346239249,140.06266051775137L122.2083921236734,147.7354829004825L118.48197308372997,155.36378367845L114.45919516755694,162.92731775668761L110.02557209409443,170.40012929754198L105.03200902482891,177.7474756349606L99.27891811409114,184.92109353338338L92.49445129499384,191.85175297774725L84.3076551654224,198.43751290445152L74.22596926914088,204.52579180948948L61.65277552058859,209.88898669246763L46.03849895184814,214.20217405912402L27.304313233942423,217.055858847318L6.451066013724983,218.06274577480457L6.451066013724983,218.06274577480457L0,217.96837758046047L0,190.55329757211615L0,163.13821756377183L0,135.7231375554275L0,108.3080575470832L0,80.89297753873888L0,53.47789753039454L0,26.06281752205024L0,-1.3522624862941086L252,-1.3522624862941086L504,-1.3522624862941086L504,26.06281752205024L504,53.47789753039454L504,80.89297753873888L504,108.3080575470832L504,135.7231375554275L504,163.13821756377183L504,190.55329757211615Z

and:

M0,198.47868323936274L4.927028427960408,206.02871397201466L11.93725138272032,213.71099149842013L22.20984708937999,221.034554053252L38.419917256266814,227.6527556580375L65.18825228558191,232.7633822265229L104.68485444720656,234.82977872657665L104.68485444720656,234.82977872657665L144.18145660882874,232.7633822265232L170.94979163814477,227.652755658038L187.15986180503202,221.03455405325258L197.4324575116921,213.71099149842075L204.4426804664522,206.02871397201534L209.55669285362313,198.14571060477368L213.49875943621376,190.14123492852747L216.6785335463443,182.0587480265382L219.34296743530004,173.9239532585937L221.64982920279115,165.75306376812097L223.7054669341448,157.55691088670665L225.58541432472487,149.34313699247687L227.3463210486864,141.11744544980337L229.03330750837762,132.8843621970575L230.68485444720648,124.64773751370622L232.33640138603536,116.41111283035495L234.02338784572657,108.17802957760907L235.7842945696881,99.9523380349356L237.6642419602681,91.7385641407058L239.71987969162174,83.54241125929147L242.02674145911286,75.37152176881874L244.69117534806858,67.23672700087423L247.87094945819908,59.154240098884955L251.81301604078962,51.149764422638725L256.9270284279605,43.26676105539707L263.9372513827204,35.58448352899161L274.2098470893801,28.26092097415973L290.4199172562667,21.642719369374305L317.18825228558194,16.532092800888876L356.6848544472066,14.465696300835148L396.18145660882567,16.532092800888222L422.9497916381429,21.642719369373268L439.15986180503097,28.26092097415861L449.4324575116914,35.58448352899036L456.4426804664517,43.26676105539579L461.55669285362274,51.1497644226374L465.4987594362135,59.15424009888365L468.67853354634417,67.23672700087295L471.3429674352999,75.37152176881747L473.64982920279107,83.54241125929025L475.70546693414474,91.73856414070463L477.58541432472487,99.95233803493443L479.3463210486864,108.17802957760796L481.03330750837756,116.41111283035387L482.6848544472064,124.64773751370517L484.3364013860353,132.88436219705648L486.0233878457266,141.11744544980237L487.78429456968803,149.3431369924759L489.6642419602681,157.55691088670574L491.7198796916217,165.75306376812011L494.0267414591128,173.92395325859286L496.69117534806855,182.05874802653742L499.87094945819905,190.14123492852673L503.8130160407896,198.145710604773L504,198.47868323936274L504,224.5632103765343L504,250.6477375137059L252,250.6477375137059L0,250.6477375137059L0,224.5632103765343Z

But it is not me who create them, is an external application that return them to me and they can be extremely different between them.

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.

来源：https://stackoverflow.com/questions/53791442/interpolate-and-animate-two-svg-path

标签

animation

svg

interpolation