Superformula Tweening

Christophe Viau implemented a new shape type as a D3 plugin based on superformulas. One nice property of these shapes is that you can easily tween between two shapes by simply interpolating the control points. Click on the blue shapes to try it!

<!DOCTYPE html>
<meta charset="utf-8">
<title>Superformula</title>
<style>

path {
  stroke-width: 1.5px;
}

.small {
  fill: steelblue;
}

.big {
  stroke: #666;
  fill: #ddd;
}

.small:hover {
  stroke: steelblue;
  fill: lightsteelblue;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="d3.superformula.min.js"></script>
<script>

var size = 1000;

var x = d3.scale.ordinal()
    .domain(d3.superformulaTypes)
    .rangePoints([0, 960], 1);

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

var small = d3.superformula()
    .type(function(d) { return d; })
    .size(size);

var big = d3.superformula()
    .type("square")
    .size(size * 50)
    .segments(360);

svg.selectAll("a")
    .data(d3.superformulaTypes)
  .enter().append("a")
    .attr("xlink:title", String)
    .attr("transform", function(d, i) { return "translate("+ x(d) + ",40)"; })
  .append("path")
    .attr("class", "small")
    .attr("d", small)
    .on("mousedown", function() { d3.select(this).style("fill", "aliceblue"); })
    .on("mouseup", function() { d3.select(this).style("fill", null); })
    .on("click", function(d) { d3.select(".big").transition().duration(500).attr("d", big.type(d)); });

svg.append("path")
    .attr("class", "big")
    .attr("transform", "translate(450,250)")
    .attr("d", big);

</script>

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