braces

_.md

[ Launch: braces ] 6646204 by georules

config.json

{"description":"braces","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/DUuATYc.png"}

inlet.js

var svg = d3.select("svg")

Array.range= function(a, b, step){
    var A= [];
    A[0]= a;
    step= step || 1;
    while(a+step<= b){
      A[A.length]= a+= step;
    }
    return A;
}

var colorBright="#8D1DC1"
var colorDark="#6c0d98"
var bgColor="#210024"
var fontSize = 25;
var braceStyle={
  'font-family':'Courier',
  'stroke':colorDark,'fill':colorDark,
  'font-size':fontSize+'px',
  'font-weight':'600'
}
var braceStyle2={
  'font-family':'Courier',
  'stroke':colorBright,'fill':colorBright,
  'font-size':fontSize+'px',
  'font-weight':'600'
}
var braceStart={
  x:-22,
  y:12
}

svg.append("rect").attr({width:'100%', height:'100%', fill: bgColor})

stepX = fontSize * 1.68
stepY = fontSize * 1.28
Array.range(braceStart.x,1107,stepX).forEach(function(i,idex) {
  Array.range(braceStart.y,1240,stepY).forEach(function(j,jdex) {
    xval = i
    yval = j
    if (jdex%2==0){
      xval = xval + stepX/2
      svg.append("text").text("{}").style(braceStyle).attr({x:xval,y:yval})
    }
    else {
      svg.append("text").text("{}").style(braceStyle2).attr({x:xval,y:yval})
    }
  })
})