square to star

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

circle { stroke: red; fill: none; stroke-width: 2; r: 5}

.star { fill: #FDCB0B; }
  </style>
</head>

<body>
  <script>
    var t = d3.transition()

var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);

const starData   = "M150,25  179,111  269,111  197,165  223,251  150,200  77,251  103,165  31,111  121,111z";
    const squareData = "M31,25  90,25  150,25  210,25  269,25  269,138  269,251  150,251  31,251  31,138z";

// star
    const star = svg.append("path")
      .classed("star", true)
      .attr("d", starData);

function loopMorph(shape) {
      const duration = 1000;
      const delay = 500;

const shapeData = shape === "star" ? starData : squareData;

star
        .transition()
        .duration(duration)
        .ease(d3.easeExp)
        .attr("d", shapeData)

setTimeout(
        () => { loopMorph(shape === "star" ? "square" : "star") },
        duration + delay);
    }

loopMorph("square");
  </script>
</body>

https://d3js.org/d3.v4.min.js