lever identicon sketch

_.md

[ Launch: lever identicon sketch ] 5864355 by enjalot
[ Launch: lever identicon sketch ] 5853975 by srhnhm
[ Launch: lever identicon sketch ] 5853859 by enjalot

config.json

{"description":"lever identicon sketch","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"identicon.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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/cte21p0.png"}

identicon.html

<div class="identicon">
  <div class="bg"></div>
  <div class="lever"></div>
  <div class="text">IJ</div>
</div>

inlet.js

var display = d3.select("#display");

style.css

.identicon {
  position: relative;
  display:inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;  
}
.identicon div {
  position: absolute;
  width: 100%;
  height: 100%; 
}

.identicon .bg {
  background: black;
}

.identicon .lever {
  background: blue;
  width: 200%;
  height: 200%;
  margin-top: -140%;
  margin-left: -100%;
  -webkit-transform: rotate(-14deg);
}

.identicon .text {
  line-height: 200%;
  text-align: center;
  color: white;
}