Triangles

config.json

{"description":"Triangles","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":770,"height":441,"hide":false},"hidepanel":false}

inlet.js

d3.select('#display').style('background','black')

var p1 = [100,100];
var p2 = [200,200];
var p3 = [0,200];

var tX = 557;
var tY = 100;

var off = 5.08;
var col = d3.rgb("#276BAA");


for(var i=0; i < 48; i++){
	
  g.append('path')
  .attr("stroke",col.toString())
  .attr("stroke-width",3.76)
  .attr("fill",'none')
  .attr('transform','translate(300,'+(400+(i*2))+')')
  .attr("d","M"+(p1[0])+","+(p1[1]-(i*off))+" L"+(p2[0]+(i*off))+","+(p2[1])+" L"+(p3[0]-(i*off))+","+(p3[1])+"Z")
//  .attr('transform','translate('+(tX+(i*2))+','+(tY + (i*5))+')')  
//  .attr("d","M"+p1[0]+","+(p1[1]*Math.cos(i/(-14)))+" L"+(p2[0]*Math.log(i))+","+p2[1]+" L"+(p3[0]*Math.sqrt(i*2))+","+(p3[1])+"Z")
    col = col.brighter(0.1);
}
               
              
var col = d3.rgb("#AA9027");

        
g.selectAll('path').each(function(e,i){

  
	var x = d3.select(this);
     console.log(x,e,i);
x.transition().duration(3000).attr('stroke',col.toString())
      .attr('transform','rotate('+(5*i)+',300,332)')
    	col = col.brighter(0.1);
});