title: Interpolate and animate two svg path
body: <p>I have two svg path curves that I want to animate.
  I want that in 5 seconds <code>dPathBefore</code> becomes <code>dPathNow</code> with a smooth animation transition.</p>
  
  <p>That is my code:</p>
  
  <pre><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 (
        &lt;svg width={500} height={400} className={'ba b--black'}&gt;
          &lt;path d={dPathBefore} fill={'cyan'} fillOpacity={0.5} /&gt;
          &lt;path d={dPathNow} fill={'red'} fillOpacity={0.5} /&gt;
        &lt;/svg&gt;
      )
    }
  }
  </code></pre>
  
  <p>I read <a href="http://tavmjong.free.fr/blog/?p=741" rel="nofollow noreferrer">that article</a> and I tried to do that:</p>
  
  <pre><code>&lt;path d={dPathBefore}&gt;
    &lt;animate
      dur={'5s'}
      repeatCount={'indefinite'}
      attributeName={'d'}
      values={`${dPathNow};${dPathBefore};${dPathNow};`}
    /&gt;
  &lt;/path&gt;
  </code></pre>
  
  <p>That produce:</p>
  
  <p><a href="https://i.stack.imgur.com/bu8xy.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bu8xy.gif" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>I have no preference on how to do this. I can use Javascript, CSS, SVG, ...</p>
  
  <p>Thanks to anyone who wants to help me</p>
  
  <hr>
  
  <p>A two possible paths are:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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.</p>