OMG Superformula by pstuffa

index.html

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

body {
  margin: 0;
  background: #222;
  min-width: 960px;
}

rect {
  fill: none;
  pointer-events: all;
}

.small {
  fill: steelblue;
  fill-opacity: .5;
  stroke: white;
}

.small:hover {
  fill: white;
  fill: lightsteelblue;
}


.big {
  stroke: #666;
  stroke-width: 2;
  fill: none;
}


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

var width = Math.max(1200, innerWidth),
    height = Math.max(600, innerHeight);

var i = 0;

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

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

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


var huge = d3.superformula()
    .size(30000)
    .type("square")
    .segments(360);

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

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .on("ontouchstart" in document ? "touchmove" : "mousemove", particle);

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("click", function(d) { d3.select(".big").attr("d", big.type(d)); })
    .on("click", function(d) { d3.select(".huge").attr("d", huge.type(d)); });


function particle() {

  var m = d3.mouse(this);

  svg.insert("path","rect")

      .attr("class", "big")
      .attr("d", big)
      .style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
      .style("stroke-opacity", 1)
     .attr("transform", function(d, i) { return "translate("+ m[0] + "," + m[1] + ")"; })

    .transition()
      .duration(1000)
      .ease(Math.sqrt)
      .attr("d", huge)
      .style("fill-opacity", 1e-6)
      .style("stroke-opacity", 1e-6)
      .remove();

  d3.event.preventDefault();
}




</script>