JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
<script src="https://unpkg.com/d3-interpolate-path/build/d3-interpolate-path.min.js"></script>
<div id="container">

JavaScript

var coeur = "M67.356 99.627c-12.841-8.446-15.965-10.403-27.364-21.809-32.67-32.688 7.872-60.071 26.525-38.819.392.446.814.404.814.404h.051s.422.042.814-.404C86.849 17.747 127.39 45.13 94.72 77.818c-11.4 11.406-14.523 13.363-27.364 21.809z";

var croix = "M52.541 23.058H79v26.459h26.459v26.459h-26.46v26.458H52.542V75.976H26.083V49.517H52.54z";


var elContainer = d3.select('#container');


var svg = elContainer.append('svg')
  .attr('width', 500)
  .attr('height', 500)
  .append('g');

var path = svg.append('path')

path
  .transition()
  .attrTween('d', function (d) {
    const int = d3.interpolatePath(croix, coeur);
    
    debugger;
    
    return int;
  });

//loop();

async function loop() {
  while (true) {
    await path
      .attr("d", croix)
      .transition()
      .duration(5000)
      .attr("d", coeur)
      .transition()
      .delay(5000)
      .attr("d", croix)
      .end()
  }
}