requirebin sketch

index.js

var Color = require('color');

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var body = document.body;

body.appendChild(canvas);

var holons = ["organism", "organ", "tissue", "cell", "molecule", "atom", "particle"];

function draw () {
  var width = body.clientWidth;
	var height = body.clientHeight;
  
  canvas.width = width;
	canvas.height = height;
 
  var centerX = width / 2;
  var centerY = height / 2;
  var radius = Math.min(width, height) / 2 - 5;
  var color = Color({
    hue: 120,
    saturation: 100,
    lightness: 50,
  })
  
  console.log("color", color.hexString());

	holons.forEach(function (holon, index) { 
    
    var part = index / holons.length;
    var holonRadius = radius * (1 - part);
    var holonColor = color.clone().rotate(part * 360).lighten(part);
    
    console.log(holonRadius, holonColor.hexString())
    
    context.beginPath();
    context.arc(centerX, centerY, holonRadius, 0, 2 * Math.PI, false);
    context.fillStyle = holonColor.hexString();
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = holonColor.clone().darken(index / (holons.length * 2)).hexString();
    context.stroke();
    
		context.font = "20px Helvetica";
    context.fillStyle = "black";
    var text = holon;
   	var textWidth = context.measureText(text).width;
		context.fillText(text, centerX - (textWidth / 2), centerY - holonRadius + (radius / (holons.length * 2)) + 8);
  });
}

window.addEventListener('resize', draw);
draw();

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports={rgb2hsl:rgb2hsl,rgb2hsv:rgb2hsv,rgb2hwb:rgb2hwb,rgb2cmyk:rgb2cmyk,rgb2keyword:rgb2keyword,rgb2xyz:rgb2xyz,rgb2lab:rgb2lab,rgb2lch:rgb2lch,hsl2rgb:hsl2rgb,hsl2hsv:hsl2hsv,hsl2hwb:hsl2hwb,hsl2cmyk:hsl2cmyk,hsl2keyword:hsl2keyword,hsv2rgb:hsv2rgb,hsv2hsl:hsv2hsl,hsv2hwb:hsv2hwb,hsv2cmyk:hsv2cmyk,hsv2keyword:hsv2keyword,hwb2rgb:hwb2rgb,hwb2hsl:hwb2hsl,hwb2hsv:hwb2hsv,hwb2cmyk:hwb2cmyk,hwb2keyword:hwb2keyword,cmyk2rgb:cmyk2rgb,cmyk2hsl:cmyk2hsl,cmyk2hsv:cmyk2hsv,cmyk2hwb:cmyk2hwb,cmyk2keyword:cmyk2keyword,keyword2rgb:keyword2rgb,keyword2hsl:keyword2hsl,keyword2hsv:keyword2hsv,keyword2hwb:keyword2hwb,keyword2cmyk:keyword2cmyk,keyword2lab:keyword2lab,keyword2xyz:keyword2xyz,xyz2rgb:xyz2rgb,xyz2lab:xyz2lab,xyz2lch:xyz2lch,lab2xyz:lab2xyz,lab2rgb:lab2rgb,lab2lch:lab2lch,lch2lab:lch2lab,lch2xyz:lch2xyz,lch2rgb:lch2rgb};function rgb2hsl(rgb){var r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,min=Math.min(r,g,b),max=Math.max(r,g,b),delta=max-min,h,s,l;if(max==min)h=0;else if(r==max)h=(g-b)/delta;else if(g==max)h=2+(b-r)/delta;else if(b==max)h=4+(r-g)/delta;h=Math.min(h*60,360);if(h<0)h+=360;l=(min+max)/2;if(max==min)s=0;else if(l<=.5)s=delta/(max+min);else s=delta/(2-max-min);return[h,s*100,l*100]}function rgb2hsv(rgb){var r=rgb[0],g=rgb[1],b=rgb[2],min=Math.min(r,g,b),max=Math.max(r,g,b),delta=max-min,h,s,v;if(max==0)s=0;else s=delta/max*1e3/10;if(max==min)h=0;else if(r==max)h=(g-b)/delta;else if(g==max)h=2+(b-r)/delta;else if(b==max)h=4+(r-g)/delta;h=Math.min(h*60,360);if(h<0)h+=360;v=max/255*1e3/10;return[h,s,v]}function rgb2hwb(rgb){var r=rgb[0],g=rgb[1],b=rgb[2],h=rgb2hsl(rgb)[0],w=1/255*Math.min(r,Math.min(g,b)),b=1-1/255*Math.max(r,Math.max(g,b));return[h,w*100,b*100]}function rgb2cmyk(rgb){var r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,c,m,y,k;k=Math.min(1-r,1-g,1-b);c=(1-r-k)/(1-k)||0;m=(1-g-k)/(1-k)||0;y=(1-b-k)/(1-k)||0;return[c*100,m*100,y*100,k*100]}function rgb2keyword(rgb){return reverseKeywords[JSON.stringify(rgb)]}function rgb2xyz(rgb){var r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255;r=r>.04045?Math.pow((r+.055)/1.055,2.4):r/12.92;g=g>.04045?Math.pow((g+.055)/1.055,2.4):g/12.92;b=b>.04045?Math.pow((b+.055)/1.055,2.4):b/12.92;var x=r*.4124+g*.3576+b*.1805;var y=r*.2126+g*.7152+b*.0722;var z=r*.0193+g*.1192+b*.9505;return[x*100,y*100,z*100]}function rgb2lab(rgb){var xyz=rgb2xyz(rgb),x=xyz[0],y=xyz[1],z=xyz[2],l,a,b;x/=95.047;y/=100;z/=108.883;x=x>.008856?Math.pow(x,1/3):7.787*x+16/116;y=y>.008856?Math.pow(y,1/3):7.787*y+16/116;z=z>.008856?Math.pow(z,1/3):7.787*z+16/116;l=116*y-16;a=500*(x-y);b=200*(y-z);return[l,a,b]}function rgb2lch(args){return lab2lch(rgb2lab(args))}function hsl2rgb(hsl){var h=hsl[0]/360,s=hsl[1]/100,l=hsl[2]/100,t1,t2,t3,rgb,val;if(s==0){val=l*255;return[val,val,val]}if(l<.5)t2=l*(1+s);else t2=l+s-l*s;t1=2*l-t2;rgb=[0,0,0];for(var i=0;i<3;i++){t3=h+1/3*-(i-1);t3<0&&t3++;t3>1&&t3--;if(6*t3<1)val=t1+(t2-t1)*6*t3;else if(2*t3<1)val=t2;else if(3*t3<2)val=t1+(t2-t1)*(2/3-t3)*6;else val=t1;rgb[i]=val*255}return rgb}function hsl2hsv(hsl){var h=hsl[0],s=hsl[1]/100,l=hsl[2]/100,sv,v;l*=2;s*=l<=1?l:2-l;v=(l+s)/2;sv=2*s/(l+s);return[h,sv*100,v*100]}function hsl2hwb(args){return rgb2hwb(hsl2rgb(args))}function hsl2cmyk(args){return rgb2cmyk(hsl2rgb(args))}function hsl2keyword(args){return rgb2keyword(hsl2rgb(args))}function hsv2rgb(hsv){var h=hsv[0]/60,s=hsv[1]/100,v=hsv[2]/100,hi=Math.floor(h)%6;var f=h-Math.floor(h),p=255*v*(1-s),q=255*v*(1-s*f),t=255*v*(1-s*(1-f)),v=255*v;switch(hi){case 0:return[v,t,p];case 1:return[q,v,p];case 2:return[p,v,t];case 3:return[p,q,v];case 4:return[t,p,v];case 5:return[v,p,q]}}function hsv2hsl(hsv){var h=hsv[0],s=hsv[1]/100,v=hsv[2]/100,sl,l;l=(2-s)*v;sl=s*v;sl/=l<=1?l:2-l;sl=sl||0;l/=2;return[h,sl*100,l*100]}function hsv2hwb(args){return rgb2hwb(hsv2rgb(args))}function hsv2cmyk(args){return rgb2cmyk(hsv2rgb(args))}function hsv2keyword(args){return rgb2keyword(hsv2rgb(args))}function hwb2rgb(hwb){var h=hwb[0]/360,wh=hwb[1]/100,bl=hwb[2]/100,ratio=wh+bl,i,v,f,n;if(ratio>1){wh/=ratio;bl/=ratio}i=Math.floor(6*h);v=1-bl;f=6*h-i;if((i&1)!=0){f=1-f}n=wh+f*(v-wh);switch(i){default:case 6:case 0:r=v;g=n;b=wh;break;case 1:r=n;g=v;b=wh;break;case 2:r=wh;g=v;b=n;break;case 3:r=wh;g=n;b=v;break;case 4:r=n;g=wh;b=v;break;case 5:r=v;g=wh;b=n;break}return[r*255,g*255,b*255]}function hwb2hsl(args){return rgb2hsl(hwb2rgb(args))}function hwb2hsv(args){return rgb2hsv(hwb2rgb(args))}function hwb2cmyk(args){return rgb2cmyk(hwb2rgb(args))}function hwb2keyword(args){return rgb2keyword(hwb2rgb(args))}function cmyk2rgb(cmyk){var c=cmyk[0]/100,m=cmyk[1]/100,y=cmyk[2]/100,k=cmyk[3]/100,r,g,b;r=1-Math.min(1,c*(1-k)+k);g=1-Math.min(1,m*(1-k)+k);b=1-Math.min(1,y*(1-k)+k);return[r*255,g*255,b*255]}function cmyk2hsl(args){return rgb2hsl(cmyk2rgb(args))}function cmyk2hsv(args){return rgb2hsv(cmyk2rgb(args))}function cmyk2hwb(args){return rgb2hwb(cmyk2rgb(args))}function cmyk2keyword(args){return rgb2keyword(cmyk2rgb(args))}function xyz2rgb(xyz){var x=xyz[0]/100,y=xyz[1]/100,z=xyz[2]/100,r,g,b;r=x*3.2406+y*-1.5372+z*-.4986;g=x*-.9689+y*1.8758+z*.0415;b=x*.0557+y*-.204+z*1.057;r=r>.0031308?1.055*Math.pow(r,1/2.4)-.055:r=r*12.92;g=g>.0031308?1.055*Math.pow(g,1/2.4)-.055:g=g*12.92;b=b>.0031308?1.055*Math.pow(b,1/2.4)-.055:b=b*12.92;r=Math.min(Math.max(0,r),1);g=Math.min(Math.max(0,g),1);b=Math.min(Math.max(0,b),1);return[r*255,g*255,b*255]}function xyz2lab(xyz){var x=xyz[0],y=xyz[1],z=xyz[2],l,a,b;x/=95.047;y/=100;z/=108.883;x=x>.008856?Math.pow(x,1/3):7.787*x+16/116;y=y>.008856?Math.pow(y,1/3):7.787*y+16/116;z=z>.008856?Math.pow(z,1/3):7.787*z+16/116;l=116*y-16;a=500*(x-y);b=200*(y-z);return[l,a,b]}function xyz2lch(args){return lab2lch(xyz2lab(args))}function lab2xyz(lab){var l=lab[0],a=lab[1],b=lab[2],x,y,z,y2;if(l<=8){y=l*100/903.3;y2=7.787*(y/100)+16/116}else{y=100*Math.pow((l+16)/116,3);y2=Math.pow(y/100,1/3)}x=x/95.047<=.008856?x=95.047*(a/500+y2-16/116)/7.787:95.047*Math.pow(a/500+y2,3);z=z/108.883<=.008859?z=108.883*(y2-b/200-16/116)/7.787:108.883*Math.pow(y2-b/200,3);return[x,y,z]}function lab2lch(lab){var l=lab[0],a=lab[1],b=lab[2],hr,h,c;hr=Math.atan2(b,a);h=hr*360/2/Math.PI;if(h<0){h+=360}c=Math.sqrt(a*a+b*b);return[l,c,h]}function lab2rgb(args){return xyz2rgb(lab2xyz(args))}function lch2lab(lch){var l=lch[0],c=lch[1],h=lch[2],a,b,hr;hr=h/360*2*Math.PI;a=c*Math.cos(hr);b=c*Math.sin(hr);return[l,a,b]}function lch2xyz(args){return lab2xyz(lch2lab(args))}function lch2rgb(args){return lab2rgb(lch2lab(args))}function keyword2rgb(keyword){return cssKeywords[keyword]}function keyword2hsl(args){return rgb2hsl(keyword2rgb(args))}function keyword2hsv(args){return rgb2hsv(keyword2rgb(args))}function keyword2hwb(args){return rgb2hwb(keyword2rgb(args))}function keyword2cmyk(args){return rgb2cmyk(keyword2rgb(args))}function keyword2lab(args){return rgb2lab(keyword2rgb(args))}function keyword2xyz(args){return rgb2xyz(keyword2rgb(args))}var cssKeywords={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]};var reverseKeywords={};for(var key in cssKeywords){reverseKeywords[JSON.stringify(cssKeywords[key])]=key}},{}],2:[function(require,module,exports){var conversions=require("./conversions");var convert=function(){return new Converter};for(var func in conversions){convert[func+"Raw"]=function(func){return function(arg){if(typeof arg=="number")arg=Array.prototype.slice.call(arguments);return conversions[func](arg)}}(func);var pair=/(\w+)2(\w+)/.exec(func),from=pair[1],to=pair[2];convert[from]=convert[from]||{};convert[from][to]=convert[func]=function(func){return function(arg){if(typeof arg=="number")arg=Array.prototype.slice.call(arguments);var val=conversions[func](arg);if(typeof val=="string"||val===undefined)return val;for(var i=0;i<val.length;i++)val[i]=Math.round(val[i]);return val}}(func)}var Converter=function(){this.convs={}};Converter.prototype.routeSpace=function(space,args){var values=args[0];if(values===undefined){return this.getValues(space)}if(typeof values=="number"){values=Array.prototype.slice.call(args)}return this.setValues(space,values)};Converter.prototype.setValues=function(space,values){this.space=space;this.convs={};this.convs[space]=values;return this};Converter.prototype.getValues=function(space){var vals=this.convs[space];if(!vals){var fspace=this.space,from=this.convs[fspace];vals=convert[fspace][space](from);this.convs[space]=vals}return vals};["rgb","hsl","hsv","cmyk","keyword"].forEach(function(space){Converter.prototype[space]=function(vals){return this.routeSpace(space,arguments)}});module.exports=convert},{"./conversions":1}],3:[function(require,module,exports){var convert=require("color-convert");module.exports={getRgba:getRgba,getHsla:getHsla,getRgb:getRgb,getHsl:getHsl,getHwb:getHwb,getAlpha:getAlpha,hexString:hexString,rgbString:rgbString,rgbaString:rgbaString,percentString:percentString,percentaString:percentaString,hslString:hslString,hslaString:hslaString,hwbString:hwbString,keyword:keyword};function getRgba(string){if(!string){return}var abbr=/^#([a-fA-F0-9]{3})$/,hex=/^#([a-fA-F0-9]{6})$/,rgba=/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d\.]+)\s*)?\)$/,per=/^rgba?\(\s*([\d\.]+)\%\s*,\s*([\d\.]+)\%\s*,\s*([\d\.]+)\%\s*(?:,\s*([\d\.]+)\s*)?\)$/,keyword=/(\D+)/;var rgb=[0,0,0],a=1,match=string.match(abbr);if(match){match=match[1];for(var i=0;i<rgb.length;i++){rgb[i]=parseInt(match[i]+match[i],16)}}else if(match=string.match(hex)){match=match[1];for(var i=0;i<rgb.length;i++){rgb[i]=parseInt(match.slice(i*2,i*2+2),16)}}else if(match=string.match(rgba)){for(var i=0;i<rgb.length;i++){rgb[i]=parseInt(match[i+1])}a=parseFloat(match[4])}else if(match=string.match(per)){for(var i=0;i<rgb.length;i++){rgb[i]=Math.round(parseFloat(match[i+1])*2.55)}a=parseFloat(match[4])}else if(match=string.match(keyword)){if(match[1]=="transparent"){return[0,0,0,0]}rgb=convert.keyword2rgb(match[1]);if(!rgb){return}}for(var i=0;i<rgb.length;i++){rgb[i]=scale(rgb[i],0,255)}if(!a&&a!=0){a=1}else{a=scale(a,0,1)}rgb.push(a);return rgb}function getHsla(string){if(!string){return}var hsl=/^hsla?\(\s*(\d+)\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)%\s*(?:,\s*([\d\.]+)\s*)?\)/;var match=string.match(hsl);if(match){var h=scale(parseInt(match[1]),0,360),s=scale(parseFloat(match[2]),0,100),l=scale(parseFloat(match[3]),0,100),a=scale(parseFloat(match[4])||1,0,1);return[h,s,l,a]}}function getHwb(string){if(!string){return}var hwb=/^hwb\(\s*(\d+)\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)%\s*(?:,\s*([\d\.]+)\s*)?\)/;var match=string.match(hwb);if(match){var h=scale(parseInt(match[1]),0,360),w=scale(parseFloat(match[2]),0,100),b=scale(parseFloat(match[3]),0,100),a=scale(parseFloat(match[4])||1,0,1);return[h,w,b,a]}}function getRgb(string){var rgba=getRgba(string);return rgba&&rgba.slice(0,3)}function getHsl(string){var hsla=getHsla(string);return hsla&&hsla.slice(0,3)}function getAlpha(string){var vals=getRgba(string);if(vals){return vals[3]}else if(vals=getHsla(string)){return vals[3]}else if(vals=getHwb(string)){return vals[3]}}function hexString(rgb){return"#"+hexDouble(rgb[0])+hexDouble(rgb[1])+hexDouble(rgb[2])}function rgbString(rgba,alpha){if(alpha<1||rgba[3]&&rgba[3]<1){return rgbaString(rgba,alpha)}return"rgb("+rgba[0]+", "+rgba[1]+", "+rgba[2]+")"}function rgbaString(rgba,alpha){if(alpha===undefined){alpha=rgba[3]!==undefined?rgba[3]:1}return"rgba("+rgba[0]+", "+rgba[1]+", "+rgba[2]+", "+alpha+")"}function percentString(rgba,alpha){if(alpha<1||rgba[3]&&rgba[3]<1){return percentaString(rgba,alpha)}var r=Math.round(rgba[0]/255*100),g=Math.round(rgba[1]/255*100),b=Math.round(rgba[2]/255*100);return"rgb("+r+"%, "+g+"%, "+b+"%)"}function percentaString(rgba,alpha){var r=Math.round(rgba[0]/255*100),g=Math.round(rgba[1]/255*100),b=Math.round(rgba[2]/255*100);return"rgba("+r+"%, "+g+"%, "+b+"%, "+(alpha||rgba[3]||1)+")"}function hslString(hsla,alpha){if(alpha<1||hsla[3]&&hsla[3]<1){return hslaString(hsla,alpha)}return"hsl("+hsla[0]+", "+hsla[1]+"%, "+hsla[2]+"%)"}function hslaString(hsla,alpha){if(alpha===undefined){alpha=hsla[3]!==undefined?hsla[3]:1}return"hsla("+hsla[0]+", "+hsla[1]+"%, "+hsla[2]+"%, "+alpha+")"}function hwbString(hwb,alpha){if(alpha===undefined){alpha=hwb[3]!==undefined?hwb[3]:1}return"hwb("+hwb[0]+", "+hwb[1]+"%, "+hwb[2]+"%"+(alpha!==undefined&&alpha!==1?", "+alpha:"")+")"}function keyword(rgb){return convert.rgb2keyword(rgb.slice(0,3))}function scale(num,min,max){return Math.min(Math.max(min,num),max)}function hexDouble(num){var str=num.toString(16).toUpperCase();return str.length<2?"0"+str:str}},{"color-convert":2}],color:[function(require,module,exports){var convert=require("color-convert"),string=require("color-string");var Color=function(cssString){if(cssString instanceof Color)return cssString;if(!(this instanceof Color))return new Color(cssString);this.values={rgb:[0,0,0],hsl:[0,0,0],hsv:[0,0,0],hwb:[0,0,0],cmyk:[0,0,0,0],alpha:1};if(typeof cssString=="string"){var vals=string.getRgba(cssString);if(vals){this.setValues("rgb",vals)}else if(vals=string.getHsla(cssString)){this.setValues("hsl",vals)}else if(vals=string.getHwb(cssString)){this.setValues("hwb",vals)}else{throw new Error('Unable to parse color from string "'+cssString+'"')}}else if(typeof cssString=="object"){var vals=cssString;if(vals["r"]!==undefined||vals["red"]!==undefined){this.setValues("rgb",vals)}else if(vals["l"]!==undefined||vals["lightness"]!==undefined){this.setValues("hsl",vals)}else if(vals["v"]!==undefined||vals["value"]!==undefined){this.setValues("hsv",vals)}else if(vals["w"]!==undefined||vals["whiteness"]!==undefined){this.setValues("hwb",vals)}else if(vals["c"]!==undefined||vals["cyan"]!==undefined){this.setValues("cmyk",vals)}else{throw new Error("Unable to parse color from object "+JSON.stringify(cssString))}}};Color.prototype={rgb:function(vals){return this.setSpace("rgb",arguments)},hsl:function(vals){return this.setSpace("hsl",arguments)},hsv:function(vals){return this.setSpace("hsv",arguments)},hwb:function(vals){return this.setSpace("hwb",arguments)},cmyk:function(vals){return this.setSpace("cmyk",arguments)},rgbArray:function(){return this.values.rgb},hslArray:function(){return this.values.hsl},hsvArray:function(){return this.values.hsv},hwbArray:function(){if(this.values.alpha!==1){return this.values.hwb.concat([this.values.alpha])}return this.values.hwb},cmykArray:function(){return this.values.cmyk},rgbaArray:function(){var rgb=this.values.rgb;return rgb.concat([this.values.alpha])},hslaArray:function(){var hsl=this.values.hsl;return hsl.concat([this.values.alpha])},alpha:function(val){if(val===undefined){return this.values.alpha}this.setValues("alpha",val);return this},red:function(val){return this.setChannel("rgb",0,val)},green:function(val){return this.setChannel("rgb",1,val)},blue:function(val){return this.setChannel("rgb",2,val)},hue:function(val){return this.setChannel("hsl",0,val)},saturation:function(val){return this.setChannel("hsl",1,val)},lightness:function(val){return this.setChannel("hsl",2,val)},saturationv:function(val){return this.setChannel("hsv",1,val)},whiteness:function(val){return this.setChannel("hwb",1,val)},blackness:function(val){return this.setChannel("hwb",2,val)},value:function(val){return this.setChannel("hsv",2,val)},cyan:function(val){return this.setChannel("cmyk",0,val)},magenta:function(val){return this.setChannel("cmyk",1,val)},yellow:function(val){return this.setChannel("cmyk",2,val)},black:function(val){return this.setChannel("cmyk",3,val)},hexString:function(){return string.hexString(this.values.rgb)},rgbString:function(){return string.rgbString(this.values.rgb,this.values.alpha)},rgbaString:function(){return string.rgbaString(this.values.rgb,this.values.alpha)},percentString:function(){return string.percentString(this.values.rgb,this.values.alpha)},hslString:function(){return string.hslString(this.values.hsl,this.values.alpha)},hslaString:function(){return string.hslaString(this.values.hsl,this.values.alpha)},hwbString:function(){return string.hwbString(this.values.hwb,this.values.alpha)},keyword:function(){return string.keyword(this.values.rgb,this.values.alpha)},rgbNumber:function(){return this.values.rgb[0]<<16|this.values.rgb[1]<<8|this.values.rgb[2]},luminosity:function(){var rgb=this.values.rgb;var lum=[];for(var i=0;i<rgb.length;i++){var chan=rgb[i]/255;lum[i]=chan<=.03928?chan/12.92:Math.pow((chan+.055)/1.055,2.4)}return.2126*lum[0]+.7152*lum[1]+.0722*lum[2]},contrast:function(color2){var lum1=this.luminosity();var lum2=color2.luminosity();if(lum1>lum2){return(lum1+.05)/(lum2+.05)}return(lum2+.05)/(lum1+.05)},level:function(color2){var contrastRatio=this.contrast(color2);return contrastRatio>=7.1?"AAA":contrastRatio>=4.5?"AA":""},dark:function(){var rgb=this.values.rgb,yiq=(rgb[0]*299+rgb[1]*587+rgb[2]*114)/1e3;return yiq<128},light:function(){return!this.dark()},negate:function(){var rgb=[];for(var i=0;i<3;i++){rgb[i]=255-this.values.rgb[i]}this.setValues("rgb",rgb);return this},lighten:function(ratio){this.values.hsl[2]+=this.values.hsl[2]*ratio;this.setValues("hsl",this.values.hsl);return this},darken:function(ratio){this.values.hsl[2]-=this.values.hsl[2]*ratio;this.setValues("hsl",this.values.hsl);return this},saturate:function(ratio){this.values.hsl[1]+=this.values.hsl[1]*ratio;this.setValues("hsl",this.values.hsl);return this},desaturate:function(ratio){this.values.hsl[1]-=this.values.hsl[1]*ratio;this.setValues("hsl",this.values.hsl);return this},whiten:function(ratio){this.values.hwb[1]+=this.values.hwb[1]*ratio;this.setValues("hwb",this.values.hwb);return this},blacken:function(ratio){this.values.hwb[2]+=this.values.hwb[2]*ratio;this.setValues("hwb",this.values.hwb);return this},greyscale:function(){var rgb=this.values.rgb;var val=rgb[0]*.3+rgb[1]*.59+rgb[2]*.11;this.setValues("rgb",[val,val,val]);return this},clearer:function(ratio){this.setValues("alpha",this.values.alpha-this.values.alpha*ratio);return this},opaquer:function(ratio){this.setValues("alpha",this.values.alpha+this.values.alpha*ratio);return this},rotate:function(degrees){var hue=this.values.hsl[0];hue=(hue+degrees)%360;hue=hue<0?360+hue:hue;this.values.hsl[0]=hue;this.setValues("hsl",this.values.hsl);return this},mix:function(color2,weight){weight=1-(weight==null?.5:weight);var t1=weight*2-1,d=this.alpha()-color2.alpha();var weight1=((t1*d==-1?t1:(t1+d)/(1+t1*d))+1)/2;var weight2=1-weight1;var rgb=this.rgbArray();var rgb2=color2.rgbArray();for(var i=0;i<rgb.length;i++){rgb[i]=rgb[i]*weight1+rgb2[i]*weight2}this.setValues("rgb",rgb);var alpha=this.alpha()*weight+color2.alpha()*(1-weight);this.setValues("alpha",alpha);return this},toJSON:function(){return this.rgb()},clone:function(){return new Color(this.rgb())}};Color.prototype.getValues=function(space){var vals={};for(var i=0;i<space.length;i++){vals[space[i]]=this.values[space][i]}if(this.values.alpha!=1){vals["a"]=this.values.alpha}return vals};Color.prototype.setValues=function(space,vals){var spaces={rgb:["red","green","blue"],hsl:["hue","saturation","lightness"],hsv:["hue","saturation","value"],hwb:["hue","whiteness","blackness"],cmyk:["cyan","magenta","yellow","black"]};var maxes={rgb:[255,255,255],hsl:[360,100,100],hsv:[360,100,100],hwb:[360,100,100],cmyk:[100,100,100,100]};var alpha=1;if(space=="alpha"){alpha=vals}else if(vals.length){this.values[space]=vals.slice(0,space.length);alpha=vals[space.length]}else if(vals[space[0]]!==undefined){for(var i=0;i<space.length;i++){this.values[space][i]=vals[space[i]]}alpha=vals.a}else if(vals[spaces[space][0]]!==undefined){var chans=spaces[space];for(var i=0;i<space.length;i++){this.values[space][i]=vals[chans[i]]}alpha=vals.alpha}this.values.alpha=Math.max(0,Math.min(1,alpha!==undefined?alpha:this.values.alpha));if(space=="alpha"){return}for(var i=0;i<space.length;i++){var capped=Math.max(0,Math.min(maxes[space][i],this.values[space][i]));this.values[space][i]=Math.round(capped)}for(var sname in spaces){if(sname!=space){this.values[sname]=convert[space][sname](this.values[space])}for(var i=0;i<sname.length;i++){var capped=Math.max(0,Math.min(maxes[sname][i],this.values[sname][i]));this.values[sname][i]=Math.round(capped)}}return true};Color.prototype.setSpace=function(space,args){var vals=args[0];if(vals===undefined){return this.getValues(space)}if(typeof vals=="number"){vals=Array.prototype.slice.call(args)}this.setValues(space,vals);return this};Color.prototype.setChannel=function(space,index,val){if(val===undefined){return this.values[space][index]}this.values[space][index]=val;this.setValues(space,this.values[space]);return this};module.exports=Color},{"color-convert":2,"color-string":3}]},{},[]);var Color=require("color");var canvas=document.createElement("canvas");var context=canvas.getContext("2d");var body=document.body;body.appendChild(canvas);var holons=["organism","organ","tissue","cell","molecule","atom","particle"];function draw(){var width=body.clientWidth;var height=body.clientHeight;canvas.width=width;canvas.height=height;var centerX=width/2;var centerY=height/2;var radius=Math.min(width,height)/2-5;var color=Color({hue:120,saturation:100,lightness:50});console.log("color",color.hexString());holons.forEach(function(holon,index){var part=index/holons.length;var holonRadius=radius*(1-part);var holonColor=color.clone().rotate(part*360).lighten(part);console.log(holonRadius,holonColor.hexString());context.beginPath();context.arc(centerX,centerY,holonRadius,0,2*Math.PI,false);context.fillStyle=holonColor.hexString();context.fill();context.lineWidth=5;context.strokeStyle=holonColor.clone().darken(index/(holons.length*2)).hexString();context.stroke();context.font="20px Helvetica";context.fillStyle="black";var text=holon;var textWidth=context.measureText(text).width;context.fillText(text,centerX-textWidth/2,centerY-holonRadius+radius/(holons.length*2)+8)})}window.addEventListener("resize",draw);draw();

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "color": "0.7.3"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin