JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
  <svg xmlns="http://www.w3.org/2000/svg" id="heart-path" fill="red" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
     <linearGradient id="linear-gradient">
    <stop offset="10%" stop-color="#14EAB2"/>
    <stop offset="60%" stop-color="#5FBBD4"/>
    <stop offset="80%" stop-color="#C451C6"/>
    <stop offset="11111%" stop-color="red"/>
  </linearGradient>
  
   <path id="black" fill="white" x1="10" y1="20"  stroke="black"  stroke-width="2" stroke="#ED6A5A"     
  
       d="M 50.006,24.955 C 44.74,13.612 29.879,8.657 18.511,13.923 6.402,19.539 0.613,33.883 10.175,50.804 16.967,62.844 29.001,71.915 50.006,88.183 70.999,71.915 83.039,62.839 89.825,50.804 99.387,33.883 93.598,19.539 81.495,13.923 70.127,8.662 55.261,13.612 50.006,24.955"
  
  />
  <path id="heart-path1" fill="white" x1="10" y1="20"  stroke="url(#linear-gradient)"  stroke-width="3" stroke="#ED6A5A"     
  
       d="M 50.006,24.955 C 44.74,13.612 29.879,8.657 18.511,13.923 6.402,19.539 0.613,33.883 10.175,50.804 16.967,62.844 29.001,71.915 50.006,88.183 70.999,71.915 83.039,62.839 89.825,50.804 99.387,33.883 93.598,19.539 81.495,13.923 70.127,8.662 55.261,13.612 50.006,24.955"
  
  />

              </svg>

CSS

#container {
  margin: 20px;
  width: 200px;
  height: 200px;
}

Babel + JSX

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Path('#heart-path1', {
  easing: 'easeInOut',
  duration: 1400
});

bar.set(0);
bar.animate(-0.8);  // Number from 0.0 to 1.0