dukevis · December 28, 2015 09:39
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!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="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/d3.superformula.v0.min.js"></script>
 <script>

 var size = 1000;
 var shape = "circle"

 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("circle")
    .size(size * 50)
    .segments(360);

 var node = d3.superformula()
    .type("circle")
    .size(size * 25)
    .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", node)
    .on("click", click);

 function click(d) {
  if (d3.event.defaultPrevented) return; // ignore drag
  if (shape == "circle") {
      shape = "square";
      d3.select(".big").transition().duration(500).attr("d", big.type("square"));
      return;
      
  } else {
      shape = "circle";
      d3.select(".big").transition().duration(500).attr("d", node.type("circle"));
      return;
  }
 }



 </script>
diff --git a/thumbnail.png b/thumbnail.png
	<!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="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.superformula.v0.min.js"></script>
	<script>

	var size = 1000;
	var shape = "circle"

	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("circle")
	.size(size * 50)
	.segments(360);

	var node = d3.superformula()
	.type("circle")
	.size(size * 25)
	.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", node)
	.on("click", click);

	function click(d) {
	if (d3.event.defaultPrevented) return; // ignore drag
	if (shape == "circle") {
	shape = "square";
	d3.select(".big").transition().duration(500).attr("d", big.type("square"));
	return;

	} else {
	shape = "circle";
	d3.select(".big").transition().duration(500).attr("d", node.type("circle"));
	return;
	}
	}



	</script>