Ratio

_.md

[ Launch: Ratio ] 11525403 by NoahMarconi

config.json

{"description":"Ratio","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}},"fullscreen":true,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/RrRFrNd.gif"}

inlet.js

  WebFontConfig = {
    google: { families: [ 'Droid+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();



var svg = d3.select("svg");
var ratio = (1+Math.sqrt(5)/2)
var a = 50;
var b = a*ratio;
var c = a+b;
var width = b;
var height = c;
var pad = a;
var r = a*0.5;
var gap = (b*2)/ratio;
var textwidth = gap + width*2 * ratio + pad;

svg.attr({
  width: (a*3) + (b*2) + gap + textwidth,
  height: a*2 + height
}).style({"background":"#222"})


// Left rect.
svg.append("rect")
.attr({
  width: width,
  height: height,
  x: pad,
  y: pad,
  ry:r,
  rx:r,
  fill: "#24D1C4"
});

// Right rect.
svg.append("rect")
.attr({
  width: width,
  height: height,
  x: pad + width + gap,
  y: pad,
  ry:r,
  rx:r,
  fill: "#24D1C4"
});


// Top circle.
var topc = svg.append("rect")
.attr({
  width: a,
  height: a,
  x: pad + width + gap/2 - a/2,
  y: pad,
  ry:r,
  rx:r,
  fill: "#24D1C4"
});

// Bottom circle.
var btmc = svg.append("rect")
.attr({
  width: a,
  height: a,
  x: pad + width + gap/2 - a/2,
  y: pad + height - a,
  ry:r,
  rx:r,
  fill: "#24D1C4"
});

var text = svg.append("g").append("text")
.text("Ratio.IO")
.attr({
  x: width*2 + gap + pad*2,
  y: "50%",
  dy:"0.34em"
})
.style({
  "font-size": 165,
  "font-family": "Droid Sans",
  "text-anchor": "start",
  "fill": "#fff"
})

var cycle = function(){

  topc.transition().duration(500).attr({y: pad + height/2})
  btmc.transition().duration(500).attr({y: pad + height/2 -a})

  topc.transition().delay(500).duration(500).attr({x: pad + width + gap/4 - a/2})
  btmc.transition().delay(500).duration(500).attr({x: pad + width + gap/4*3 - a/2})

  btmc.transition().delay(1000).duration(500).attr({y: pad + height/2})
  topc.transition().delay(1000).duration(500).attr({y: pad + height/2 -a})

  btmc.transition().delay(1500).duration(500).attr({x: pad + width + gap/2 - a/2})
  topc.transition().delay(1500).duration(500).attr({x: pad + width + gap/2 - a/2})

  
};

//setInterval(cycle, 2000)
//cycle()