dns-sup

_.md

[ Launch: dns-sup ] 36f40c88f93ebbc54bd7 by enoex
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"dns-sup","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/MZtqJRr.gif","fullscreen":false,"ajax-caching":true}

inlet.js

var svg = d3.select("svg")
var chart = svg.append("g");

var bg = chart.append("rect")
.attr({
  x: 0,
  y: 0, 
  width: 400,
  height: 400
});

var textPos = [180,160];
var text = chart.append('text')
.attr({
  fill: "#00cc22",
  "font-size": "7em",
  "dy": ".25em",
  "text-anchor": "middle",
  transform: "translate(" + textPos + ") rotate(0)"
}).text("dns");

var degs = [180, 180, 359.9, 0];
var i = 0;

function rotateIt(){
    var deg = degs[i];
    i++;
    if(i>=degs.length){ i=0; }

    text.transition().duration(1000).attr({
        fill: deg === 180 ? "#000000" : "#00cc22",
        transform: "translate(" + textPos + ") rotate(" + deg + ")"
    })
    .each('end', rotateIt);

    bg.transition().duration(1000).attr({
        fill: deg === 180 ? "#00cc22" : "#000000"
    });
}
rotateIt();