Skip to content

Instantly share code, notes, and snippets.

@enjalot

enjalot/_.md

Created December 16, 2013 22:52
Show Gist options
  • Save enjalot/7996048 to your computer and use it in GitHub Desktop.
Save enjalot/7996048 to your computer and use it in GitHub Desktop.
Download ZIP
lever logo varying degrees
Raw
_.md
Raw
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"}
Raw
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] + ")"
})
Display the source blob
Display the rendered blob
Raw
lever.svg
<g class="lever" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path class="lever_bg" d="M2,-4 L2,21 L117,21 L117,-4 L2,-4 Z M2,-4"/>
<path class="lever_text" d="M34.1985924,14.4338235 L34.1985924,2.5 L36.7160586,2.5 L36.7160586,12.4044118 L41.6173201,12.4044118 L41.1494725,14.4338235 Z M51.5789751,2.5 L59.1536521,2.5 L58.7971967,4.46323529 L54.0741628,4.46323529 L54.0741628,7.22058824 L58.0174505,7.22058824 L58.0174505,9.18382353 L54.0964413,9.18382353 L54.0964413,12.3602941 L59.3318798,12.3602941 L59.3318798,14.4338235 L51.5789751,14.4338235 Z M72.4570763,14.5 L67.8454347,2.5 L70.607964,2.5 L72.8135317,8.67647059 C72.902646,8.92647184 72.9954719,9.21323368 73.0920124,9.53676471 C73.1885529,9.86029574 73.2739528,10.1654397 73.3482147,10.4522059 C73.4224766,10.738972 73.4818853,10.9852931 73.5264424,11.1911765 L73.6155563,11.4779412 L73.6823917,11.1911765 C73.7269488,10.999999 73.7863574,10.7610308 73.8606194,10.4742647 C73.9348813,10.1874986 74.0202812,9.88235456 74.1168217,9.55882353 C74.2133621,9.2352925 74.3136142,8.94853066 74.4175809,8.69852941 L76.8013763,2.5 L79.4079563,2.5 L74.7072009,14.5 Z M88.7012574,2.5 L96.2759344,2.5 L95.919479,4.46323529 L91.1964451,4.46323529 L91.1964451,7.22058824 L95.1397328,7.22058824 L95.1397328,9.18382353 L91.2187236,9.18382353 L91.2187236,12.3602941 L96.4541621,12.3602941 L96.4541621,14.4338235 L88.7012574,14.4338235 Z M112.542394,12.5147059 C112.067118,11.794114 111.706953,11.2536783 111.461889,10.8933824 C111.216824,10.5330864 111.012607,10.2573539 110.849231,10.0661765 C110.700707,9.90441096 110.537333,9.76470647 110.359105,9.64705882 C110.180876,9.52941118 109.950668,9.47058824 109.668472,9.47058824 L109.668472,14.4338235 L107.195563,14.4338235 L107.195563,2.5 L111.250243,2.5 C112.052272,2.5 112.731758,2.56249937 113.288722,2.6875 C113.845687,2.81250063 114.317243,3.02941022 114.703405,3.33823529 C115.535138,4.02941522 115.950999,4.91175934 115.950999,5.98529412 C115.950999,6.92647529 115.672521,7.69484996 115.115556,8.29044118 C114.558592,8.88603239 113.849401,9.22794074 112.987963,9.31617647 C113.166192,9.43382412 113.344418,9.62499868 113.522646,9.88970588 C113.715727,10.1397071 113.957075,10.4558804 114.246696,10.8382353 C114.536318,11.2205901 114.822222,11.617645 115.104417,12.0294118 L116.753023,14.4338235 L113.745431,14.4338235 Z M113.344419,6.02941176 C113.344419,5.66176287 113.270158,5.36764816 113.121634,5.14705882 C112.97311,4.92646949 112.780032,4.76102996 112.542394,4.65073529 C112.304756,4.54044063 112.037417,4.47058838 111.740369,4.44117647 C111.443322,4.41176456 111.153705,4.39705882 110.871509,4.39705882 L109.668472,4.39705882 L109.668472,7.68382353 L110.760117,7.68382353 C111.072017,7.68382353 111.383912,7.67279423 111.695812,7.65073529 C112.007712,7.62867636 112.28619,7.56250055 112.531255,7.45220588 C112.776319,7.34191121 112.97311,7.17647169 113.121634,6.95588235 C113.270158,6.73529301 113.344419,6.42647257 113.344419,6.02941176 Z M113.344419,6.02941176" id="lever copy 3" fill="#FFFFFF"/>
<g class="lever_logo" transform="translate(2.000000, 0.500000)">
<path class="fulcrum" d="M11.7658156,12.3650942 C12.0004001,12.132721 12.3802959,12.1318198 12.6157747,12.3650942 L15.8643385,15.5792648 C16.0989231,15.811638 16.0212747,16 15.6932438,16 L8.68849546,16 C8.35927229,16 8.28177295,15.8125393 8.51740076,15.5792648 L11.7658156,12.3650942 L11.7658156,12.3650942 Z M11.7658156,12.3650942" id="Triangle_47_copy_4 copy 2" fill="#FFFFFF"/>
<g class="plane">
<path class="plane_shaddow" d="M0,15.8100985 L15.0950682,0.761904762 C15.2618775,0.932532328 15.3752944,1.05051993 15.40621,1.20486163 L15.9838529,4.0798306 C16.0489859,4.40375393 15.9112161,4.85587201 15.6760468,5.08984985 L5.1428071,15.5765689 C4.90763788,15.8102479 4.448255,16 4.11643679,16 L0.438822457,16 C0.273288541,16 0.122762233,15.9275356 0,15.8100985 Z M0,15.8100985" id="Path copy 2" fill="#D9D9D9"/>
<path class="plane_top" d="M0,15.5892434 L0,11.9049129 C0,11.5729398 0.189639983,11.1124172 0.423330198,10.8768185 L10.9037017,0.32434273 C11.1375413,0.0888943907 11.5893921,-0.0489766993 11.913124,0.0161249168 L14.7863937,0.594822655 C14.9496035,0.627749338 15.1104242,0.724574836 15.2380952,0.854176668 L0.160970001,16 C0.0612223566,15.8924996 0,15.7481635 0,15.5892434 L0,15.5892434 Z M0,15.5892434" id="Path_345_copy_7 copy 2" fill="#FFFFFF"/>
</g>
</g>
</g>
Raw
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;
}
}());
Raw
style.css
.lever_text {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment