lever logo varying degrees

_.md

[ Launch: lever logo varying degrees ] 7996048 by enjalot
[ Launch: lever logo ] 7994492 by enjalot

config.json

{"description":"lever logo varying degrees","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"lever.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sticker.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/TJ71LmM.png"}

inlet.js

//data driven stickers
var svg = d3.select("svg");


var colorSets = [
  ['#59676c', '#7C8F95'],
  ['#6c5c7e', '#9580AF'],
  ['#7e5756', '#AE7977'],
  ['#7e7156', '#AF9D77'],
  ['#6a7e5c', '#93AE80'],
  ['#6a6a6a', '#939393'],
  ['#7e7e7f', '#AFAFB0'],
  ['#91828d', '#C9B4C3'],
  ['#92847b', '#CAB7AA'],
  ['#91917b', '#C9C8AA'],
  ['#829188', '#B4C9BC'],
  ['#735c6c', '#9F8096'],
  ['#a29692', '#E0CFCA'],
  ['#a66e8c', '#E599C2'],
  ['#b3745a', '#F8A17D'],
  ['#8a8759', '#BFBB7B'],
  ['#755a49', '#A27D66'],
  ['#91534d', '#C8736B'],
  ['#4d8090', '#6BB1C7'],
  ['#49755f', '#66A283'],
  ['#4a4f75', '#676EA2'],
  ['#78819e', '#A6B2DB'],
  ['#641c5f', '#8B2783'],
  ['#283774', '#384CA0'],
  ['#458a5e', '#60BF82'],
  ['#a7481a', '#E76425'],
  ['#515151', '#707070'],
  ['#a31052', '#E11772'],
  ['#0c4e67', '#116C8F'],
  ['#312269', '#442F91'],
  ['#491b51', '#652671']
]
var ncolors = colorSets.length;


//this creates a sticker from an existing DOM element
sticker = d3.sticker(".lever");
//console.log("sticker:", sticker)

var n = 99;
var data = d3.range(n).map(function(d,i) { 

  return 1 +  3.12;// * Math.sin(tributary.anim(0, Math.PI)); 
    //Math.sin(i/n * Math.PI * 4)
})

var r = 9;
var selection = svg.selectAll("g.sticker")
.data(data)
.enter()
.append("g")
.attr("transform", function(d,i) {
  var x = 52 + (i % r) * 103;
  var y = 49 + Math.floor(i / r) * 83;
  return "translate(" + [x,y] + ")";
})

var stickers = sticker(selection)
.attr("transform", function(d,i) {
  return "scale(" + d + ")"
})

function color(i, j) {
  var ii = (i + 11) % ncolors
  return colorSets[ii][j];
}

stickers.select(".fulcrum")
.attr("fill", function(d,i) { return color(i, 1) })

stickers.select(".plane_top")
.attr("fill", function(d,i) { return color(i, 1) })

stickers.select(".plane_shaddow")
.attr("fill", function(d,i) { return color(i, 0) })

stickers.select(".plane")
.attr("transform", function(d,i) {//11, 13
  return "rotate(" + [90 * i / n, 12, 12] + ")"
})

lever.svg

sticker.js

(function() {
  d3.sticker = function(selector) {
    var string;
    var node;
    var svgElement; //for deserializing svg elements
    
    var sticker = function(selection) {
      return sticker.append(selection);
    }
    
    sticker.copy = function(selector) {
      node = d3.select(selector).node();
      if(!node) return sticker;
      //we keep track of svg element 
      if(d3_isSVG(node)) {
        sticker.isSVG = true;
        svgElement = node.ownerSVGElement;
      }
      node = node.cloneNode(true);
      node.removeAttribute("id");
      return sticker;
    }

    sticker.paste = function() {
      if(!node) return;
      return node.cloneNode(true);
    }
    
    sticker.node = function(_) {
      if(!arguments.length) return node;
      node = _;
      if(d3_isSVG(node)) {
        sticker.isSVG = true;
        svgElement = node.ownerSVGElement;
      }
      return sticker;
    }
    
    //append a copy of the sticker to the selection
    sticker.append = function(selection) {
      return selection.select(function() {
        return this.appendChild(sticker.paste());
      });
    }
    
    //insert a copy of the sticker into a selection similar to the d3 insert API 
    sticker.insert = function(selection, before) {
      if(!string) return selection;
      return selection.select(before).select(function() {
        return this.parentNode.insertBefore(sticker.paste(), this);
      });
    }
    
    sticker.string = function(_) {
      if(!arguments.length) return string;
      string = _;
      return sticker;
    }
    
    sticker.serialize = function() {
      //Serialize the selected element into a string
      string = new XMLSerializer().serializeToString(node);
    }
    sticker.deserialize = function () {
      //check if our element is SVG
      if(sticker.isSVG) {
        node = d3_makeSVGFragment(string, svgElement);
      } else {
        node = d3_makeFragment(string);
      }
      return node;
    }
    
    sticker.toString = function() {
      sticker.serialize();
      return string;
    }

    if(selector) {
      return sticker.copy(selector);
    }
    return sticker;
  }

  function d3_isSVG(el) {
    if(!el) return false
    return !!el.ownerSVGElement;// || el.tagName === "svg";
  }
  function d3_makeFragment(fragment) {
    var range = document.createRange()
    return range.createContextualFragment(fragment);
  }
  function d3_makeSVGFragment(fragment, svgElement) {
    //we need to wrap our element in a temporarary intermediate svg element
    //so that the browser knows to instanciate the Node properly.
    //for some reason having the range select an svg element isn't enough.
    // TODO: Allow optional namespace declarations
    var pre = '<svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink>';
    var post = '</svg>';
    var range = document.createRange();
    range.selectNode(svgElement);
    var contextFragment = range.createContextualFragment(pre + fragment + post)
    var intermediateSvg = contextFragment.childNodes[0]
    var node = intermediateSvg.childNodes[0]
    return node;
  }
}());

style.css

.lever_text {
  display: none;
}