Triangles by pstuffa

index.html

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

<div id="button">
 <button>Swirl</button>
</div>

<br />
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = { top: 2, right: 2, bottom: 2, left: 2},
    width = 400,
    height = 400;


var svg = d3.select("body")
  .append("svg")
  .attr("height", height + margin.top + margin.bottom)
  .attr("width", width + margin.left + margin.right) 
  .append("g")
  .attr("transform","translate(" + margin.left + "," + margin.top + ")");

var svgTwo = d3.select("body")
  .append("svg")
  .attr("height", height + margin.top + margin.bottom)
  .attr("width", width + margin.left + margin.right) 
  .append("g")
  .attr("transform","translate(" + margin.left + "," + margin.top + ")");

svg.append("rect")
  .attr("class","rectOne")
  .attr("height",height)
  .attr("width", width)
  .style("fill","#2B1F28")

svgTwo.append("rect")
  .attr("class","rectOne")
  .attr("height",height)
  .attr("width", width)
  .style("fill","#2B1F28")

var dataset = [1,2,3];

var colorScale = d3.scale.ordinal()
  .domain([0,1,2])
  .range(["#BB2233","#7f2c39","#2B1F28"])


svg.append("g")
    .attr("transform","translate(" + (width/2) + "," + (height/2) + ")")
  .append("path")
    .attr("d", "M 0 " + (-height/3) + " L " + (-width/3) + " " + (height/3) + "L " + (width/3) + " " + (height/3) + " Z")
    .style("fill","#dd4237");

var triangles = svg.append("g")
    .attr("transform","translate(" + (width/2) + "," + (height/2) + ")")
    .selectAll("triangles")
    .data(dataset)
  .enter().append("path")
    .attr("class", function(d,i) { return "triangles triangle-" + i; })
    .attr("d", "M 0 " + (-height/3) + " L " + (-width/3) + " " + (height/3) + "L " + (width/3) + " " + (height/3) + " Z")
    .style("fill",function(d,i) { return colorScale(i); });


svgTwo.append("g")
    .attr("transform","translate(" + (width/2) + "," + (height/2) + ")")
  .append("path")
    .attr("d", "M 0 " + (-height/3) + " L " + (-width/3) + " " + (height/3) + "L " + (width/3) + " " + (height/3) + " Z")
    .style("fill","#dd4237");

var triangles = svgTwo.append("g")
    .attr("transform","translate(" + (width/2) + "," + (height/2) + ")")
    .selectAll("triangles")
    .data(dataset)
  .enter().append("path")
    .attr("class", function(d,i) { return "triangles triangle-" + i; })
    .attr("d", "M 0 " + (-height/3) + " L " + (-width/3) + " " + (height/3) + "L " + (width/3) + " " + (height/3) + " Z")
    .style("fill",function(d,i) { return colorScale(i); });

function rotTween() {
    var i = d3.interpolate(0, 360);
    return function(t) {
        return "rotate(" + i(t) + ")";
    };
}

function rotTweenTwo() {
    var i = d3.interpolate(0, 360);
    var e = d3.interpolate(1, .25);
    return function(t) {
        return "rotate(" + i(t) + ") scale(" + e(t) +")";
    };
}

function rotTweenThree() {
    var i = d3.interpolate(0, 360);
    var e = d3.interpolate(.25,1);
    return function(t) {
        return "rotate(" + i(t) + ") scale(" + e(t) +")";
    };
}

function rotTweenFour() {
    var i = d3.interpolate(0, 360);
    var e = d3.interpolate(1, .5);
    return function(t) {
        return "rotate(" + i(t) + ") scale(" + e(t) +")";
    };
}

function rotTweenFive() {
    var i = d3.interpolate(0, 360);
    var e = d3.interpolate(.5,1);
    return function(t) {
        return "rotate(" + i(t) + ") scale(" + e(t) +")";
    };
}

function rotTweenSix() {
    var i = d3.interpolate(0, 360);
    var e = d3.interpolate(1, .75);
    return function(t) {
        return "rotate(" + i(t) + ") scale(" + e(t) +")";
    };
}

function rotTweenSeven() {
    var i = d3.interpolate(0, 360);
    var e = d3.interpolate(.75,1);
    return function(t) {
        return "rotate(" + i(t) + ") scale(" + e(t) +")";
    };
}



function swirl() {

  d3.selectAll(".triangle-0")
    .transition()
    .duration(1000)
    .attrTween("transform", function(d,i) { return rotTweenSix(d); })
    .transition()
    .duration(1000)
    .attrTween("transform", function(d,i) { return rotTweenSeven(d); });

  d3.selectAll(".triangle-1")
    .transition()
    .duration(1100)
    .attrTween("transform", function(d,i) { return rotTweenFour(d); })
    .transition()
    .duration(1100)
    .attrTween("transform", function(d,i) { return rotTweenFive(d); });

  d3.selectAll(".triangle-2")
    .transition()
    .duration(1200)
    .attrTween("transform", function(d,i) { return rotTweenTwo(d); })
    .transition()
    .duration(1200)
    .attrTween("transform", function(d,i) { return rotTweenThree(d); });

}

 d3.selectAll("button").on("click",swirl)


</script>

</body>
</html>