#rotate triangles

_.md

[ Launch: #rotate triangles ] 5058110 by enjalot
[ Launch: #rotate triangles ] 5056203 by zeffii
[ Launch: zeffii default ] 5055999 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"#rotate triangles","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/aw7pxbT.png"}

inlet.js

d3.select("body").style("background-color", d3.rgb(25,25,25))

//var svg = d3.select("svg");
//var defs = svg.append("defs");
//var group1 = svg.append("g").classed("group1", true);

// styles
var tri_style = { 
  "fill": "none",
  "stroke": "#2A6C81",
  "stroke-width": 1.3 + "px"
};

var r_side = 100,
	t_side = r_side * 1.1547, // (magic ratio, calculate at runtime instead)
	t_path = tri_path(),
    y_offset = r_side / 13.2,
    cx = 159,
    cy = 201;

tributary.duration = 5500
tributary.ease = d3.ease("linear")
tributary.clone_opacity = 0.34145
tributary.nclones = 97
tributary.loop_type = "pingpong" //can also choose "period" or "off"

tributary.init = function(g) {
   
    g.append("g")
    .append("path").classed("spooky", true)
    .style(tri_style)
	.attr("d", t_path)
}

tributary.run = function(g,t) {

    var dt = t * 63;
    var tk = g.select(".spooky")
		.attr({"transform": function(d,i){
        	var translate = "translate(" + [cx + dt * y_offset, cy] + ")";
        	var rotate = "rotate(" + [dt * 5] + ")";
      		return translate + rotate
    	}
    })
    

}

// helpers
function tri_path(){
    var a = position(90, t_side),
        b = position(210, t_side),
  		c = position(330, t_side);
    return "M" + [a.x, a.y, b.x, b.y, c.x, c.y].join(" ") + "z"
}

function rad(deg){ 
  	return ((2 * Math.PI) / 360) * deg 
}

function position(rot, radius){ 
	var	rads = rad(rot-30),
    	x = Math.sin(rads) * radius,
    	y = Math.cos(rads) * radius;
  
  	return {x:x, y:y}
}

style.css

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }