animation of rectangle corner radius

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":464,"height":808,"hide":false},"endpoint":"tributary","public":true}

inlet.js

var svg = d3.select("svg");
var r_min = 5;
var r_max = 80;
var r = r_min;

svg.append("rect")
  .attr({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: "#595DA8",
    stroke: "#32325F",
    "stroke-width": 5,
    rx: r,
  })
  .classed("big", true);

var button = svg.append("g");
button.append("rect")
  .attr({
    width: 80,
    height: 30,
    fill: "#B2B2BE",
    stroke: "#333352",
    "stroke-width": 2,
    rx: 7,
  });
button.append("text")
  .text("Click")
  .attr({
    fill: "#000",
    x: 20,
    y: 20,
  });
button.attr("transform", "translate(" + [400,50] + ")")
    .on("click", function() {
    r = r_max + r_min - r;
    d3.selectAll(".big")
      .transition()
      .duration(500)
      .ease("bounce")
      .attr({
        rx: r
      });
  })

inlet.svg