Old school D3 from simpler times

All examples By author By category About

GitNoise

Full window Github gist

grid squares to star circle spin

Built with blockbuilder.org

forked from GitNoise's block: square to star

forked from GitNoise's block: grid squares to star circle

<!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);

function addDefs() {
      svg.append("defs").append("path")
      .attr("id", "aShape")
      .classed("shape", true)
      .attr("d", squareData);
    }
    
    function morph() {
      		d3.selectAll(".shape").transition()
            .duration(1000)
            .ease(d3.easeExp)
      				.attr("d", starData);
    }
    
    function spinCircle() {
      let rowNo = 0;
			d3.selectAll("use")
      	.nodes().forEach(function (d,i) {
        	const shape = d3.select(d);
        	const radianAngle = Math.PI/180 + radian * i;
          const x = radius * Math.cos(radianAngle);
          const y = radius * Math.sin(radianAngle);
        	
        	const transform =
                `translate(${x + width/2 - compensate} ${y + width/2 - compensate}) scale(${scale})`;
          
        	const maxIteration = 360;
        	let iteration = 0;
        	shape
            .transition()
            .duration(duration)
            .ease(d3.easeLinear)
            	.attr("transform", transform)
        		.on("end", function spin() { 
            	if (iteration < maxIteration) {
                
            		iteration++;
                const radian2 = (1.1 * iteration) * (Math.PI / 180);
                const x = radius * Math.cos(radianAngle + radian2);
                const y = radius * Math.sin(radianAngle + radian2);
                const transform =
                      `translate(${x + width/2 - compensate} ${y + width/2 - compensate}) scale(${scale})`;
  
              
                shape
                  .transition()
                  .duration(1)
                  .attr("transform", transform)
                  .on("end", () => spin())
                }
            }) 
      	});  
    }

function addShapes()
    {    
      	let rowNo = 0;
        for (let i=0; i<noShapes; i++) {
          if (i%columns === 0 && i != 0) {
          	rowNo++;   
          }
          
          svg.append("use")
            .attr("xlink:href", "#aShape")
          	.attr("transform", `translate(${i%columns * columnWidth} ${rowNo * rowHeight}) scale(${scale})`);
        } 
    } 
     
    addDefs();
    addShapes();
    morph();
    spinCircle()
  </script>
</body>

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