grid squares to star circle

forked from GitNoise's block: 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 { fill: blue; fill-opacity: 0.4}
    line { stroke: red}

.shape { fill: #FDCB0B; stroke: #bf9901;}
  </style>
</head>

<body>
  <script>
    /* ----- size of svg ------ */
    const width = 500;
    const height = width;
    
    /* ----- transition duration ------ */
    const duration = 1000;
    const delay = 500;

/* -----  number of shapes and size of shape  ------- */
    const noShapes = 9;
    const scale = 0.4;
    
    /* ----- grid settings ----- */
    const rows = 3;
    const columns = 3;
    const rowHeight = height / rows;
    const columnWidth = width / columns;
     
    /* -----  positions around the circle  ------- */
    const compensate = 238 * scale / 2;
    const angle = 360 / noShapes;
    const radian = angle * (Math.PI / 180);
    const radius = width / 2 - compensate;
    
    /* ----- shapes ------ */
    const starData   = "M119,0  148,86  238,86  166,140  192,226  119,175  46,226  72,140  0,86  90,86z";
    const squareData = "M0,0  59,0  119,0  179,0  238,0  238,113  238,238  119,238  0,238  0,113z";
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

const shape = d3.select(d)
            .transition()
            .duration(duration)
            .ease(d3.easeLinear)
            .attr("transform", transform);
      	});
      
      const shapeData = shapeType === "star" ? starData : squareData;
      d3.select(".shape")
            .transition()
            .duration(duration)
            .ease(d3.easeExp)
      				.attr("d", shapeData);
      
      setTimeout(
        () => { loopMorph(shapeType === "star" ? "square" : "star") },
        duration + delay);
    }

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