Built with blockbuilder.org
forked from GitNoise's block: square to star
forked from GitNoise's block: grid squares to star circle
xxxxxxxxxx
<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