this

_.md

[ Launch: this ] 5503546 by gelicia

config.json

{"description":"this","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":false,"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,"thumbnail":"http://i.imgur.com/Km8Nrvk.png"}

inlet.js

var angle = 14;//this is the angle of the empty space until the polygon starts
//the angle of the start point will realy be 180 - (angle*2)
//this doesn't need to be dynamic, it is because I like to play :3
var rightAngle = 90;

var svg  = d3.select('svg');
var startPoint = {x : 332, y: 96};
var rectSize = {l: 180, w: 190, h : 42};
var colors = {top: '#124850', left: '#2eb4c7', right: '#1a6671'};

createBox(svg, startPoint, rectSize, colors, 'mainBox');

var startPoint2 = {x : 255, y: 56};
var rectSize2 = {l: 41, w: 34, h : 75};
var colors2 = {top: '#503F12', left: '#C7842E', right: '#71521A'};
createBox(svg, startPoint2, rectSize2, colors2, 'scndBox');

var startPoint2 = {x : 409, y: 118};
var rectSize2 = {l: 19, w: 15, h : 26};
var colors2 = {top: '#125019', left: '#2EC740', right: '#1A7121'};
createBox(svg, startPoint2, rectSize2, colors2, 'scndBox');



function createBox(svg, startPoint, rectSize, colors, id){
  
  var top = [{x:startPoint.x, "y":startPoint.y},//0 top
           //1 right
        {"x": startPoint.x + (rectSize.l * Math.cos(angle * (Math.PI/180))),
         "y": startPoint.y + (rectSize.l * Math.sin(angle * (Math.PI/180)))}];
  //2 bottom
  top.push({x: top[1].x + (rectSize.w * Math.cos((180-angle) * (Math.PI/180))),
             y : top[1].y + (rectSize.w * Math.sin((180-angle) * (Math.PI/180)))});  
  //3 left
  top.push({x: top[2].x - (rectSize.l * Math.cos(angle * (Math.PI/180))),
             y : top[2].y - (rectSize.l * Math.sin(angle * (Math.PI/180)))}); 
  
  var left =[{x: top[3].x, y: top[3].y},
             {x: top[2].x, y: top[2].y}];
  
  left.push({x: top[2].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[2].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  left.push({x: top[3].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[3].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  var right =[{x: top[1].x, y: top[1].y},
             {x: top[2].x, y: top[2].y}];
  right.push({x: top[2].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[2].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  right.push({x: top[1].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[1].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  
  
  svg.selectAll("polygon #top" + id)
    .data([top])
    .enter().append("polygon")
    .attr({
      points: function(d) { 
          return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");},
      fill: colors.top,
      //'fill-opacity':'0.1',
      id: 'top' + id
    });
  
  svg.selectAll("polygon #left" + id)
    .data([left])
    .enter().append("polygon")
    .attr({
      points: function(d) { 
          return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");},
      fill: colors.left,
      id: 'left' + id
    });
  
  svg.selectAll("polygon #right" + id)
    .data([right])
    .enter().append("polygon")
    .attr({
      points: function(d) { 
          return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");},
      fill: colors.right,
      id: 'right' + id
    });
}