Nine-Colors

index.html

    <canvas id="DamienHirst" width="650" height="605"></canvas>
<!--
HTML5 painting based on:
Artist: Damien Hirst
Completion Date: 1991
Title: Abalone Acetone Powder
src: http://www.damienhirst.com/texts1/series/spots
-->

Nine-Colors.markdown

Nine Colors

HTML5 painting based on:

Artist: Ellsworth Kelly Completion Date: 1951 Style: Color Field Painting

src: http://www.wikipaintings.org/en/ellsworth-kelly/nine-colors-1951

A Pen by Tankred on CodePen.

License.

script.js

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');

var pos=20;
var radius=pos-10;
var offset=3;

var arr = new Array();

	arr[0]="#E59982";
	arr[1]="#9A1E1C";
	arr[2]="#BE4034";
	arr[3]="#79B28F";
	arr[4]="#1E2633";
	arr[5]="#9C2123";
	arr[6]="#3F2727";
	arr[7]="#375999";
	arr[8]="#AB1E24";
	arr[9]="#F07877";
	arr[10]="#4097CC";
	arr[11]="#E0F1F9";
	arr[12]="#F9AA9D";
	arr[13]="#60B1B2";
	arr[14]="#F7CF8A";
	arr[15]="#39282E";
	arr[16]="#093967";
	arr[17]="#0F245B";
	arr[18]="#E9726C";
	arr[19]="#153A4A";
	arr[20]="#E9F6FF";
	arr[21]="#A71F1F";
	arr[22]="#9EB5C5";
	arr[23]="#F15759";
	arr[24]="#3A1E1D";
	arr[25]="#174076";
	arr[26]="#8D85B6";
	arr[27]="#F7CBA8";
	arr[28]="#67B4CE";
	arr[29]="#C8D4EA";
	arr[30]="#E3E7D0";
	arr[31]="#517569";
	arr[32]="#B22923";
	arr[33]="#F9AE37";
	arr[34]="#154D5A";
	arr[35]="#FBAF3F";
	arr[36]="#2E292F";
	arr[37]="#322E2D";
	arr[38]="#FAE345";
	arr[39]="#3C2E2D";
	arr[40]="#BBCF54";
	arr[41]="#212028";
	arr[42]="#96211A";
	arr[43]="#B91C23";
	arr[44]="#B71017";
	arr[45]="#1D1B26";
	arr[46]="#005844";
	arr[47]="#D6B7BD";
	arr[48]="#504148";
	arr[49]="#B21423";
	arr[50]="#E2A2A2";
	arr[51]="#962326";
	arr[52]="#23272A";
	arr[53]="#FAAA2F";
	arr[54]="#032759";
	arr[55]="#98ACCD";
	arr[56]="#072049";
	arr[57]="#AE1D20";
	arr[58]="#2B7951";
	arr[59]="#ADCC55";
	arr[60]="#FFD15B";
	arr[61]="#91B8D7";
	arr[62]="#205A7F";
	arr[63]="#313133";
	arr[64]="#C9BC88";
	arr[65]="#EE7D79";
	arr[66]="#3E3A48";
	arr[67]="#B5D16D";
	arr[68]="#0B86C1";
	arr[69]="#ED8F85";
	arr[70]="#84BAA2";
	arr[71]="#F7BF9C";
	arr[72]="#1B2131";
	arr[73]="#A5C1E9";
	arr[74]="#99BCDA";
	arr[75]="#7BB29B";
	arr[76]="#C21F24";
	arr[77]="#CADFD8";
	arr[78]="#332B29";
	arr[79]="#F0C581";
	arr[80]="#92535C";
	arr[81]="#A1ADDD";
	arr[82]="#FFE554";
	arr[83]="#AD1A20";
	arr[84]="#C5D9F4";
	arr[85]="#BCBDDB";
	arr[86]="#E8777B";
	arr[87]="#CF848B";
	arr[88]="#59A8E1";
	arr[89]="#FED8A9";
	arr[90]="#6886C6";
	arr[91]="#EB7170";
	arr[92]="#7BC1A7";
	arr[93]="#0B9ADE";
	arr[94]="#32A7DD";
	arr[95]="#C34134";
	arr[96]="#FEE646";
	arr[97]="#F6938D";
	arr[98]="#0F403A";
	arr[99]="#133D89";
	arr[100]="#F4B764";
	arr[101]="#FDEDB9";
	arr[102]="#272530";
	arr[103]="#D34321";
	arr[104]="#57ADE0";
	arr[105]="#E47935";
	arr[106]="#7EBDA2";
	arr[107]="#006D49";
	arr[108]="#EDC6BF";
	arr[109]="#6F556E";
	arr[110]="#00643C";
	arr[111]="#F58181";
	arr[112]="#971F20";
	arr[113]="#9CA0C3";
	arr[114]="#9C2123";
	arr[115]="#DDB1A6";
	arr[116]="#202231";
	arr[117]="#F46A6A";
	arr[118]="#055183";
	arr[119]="#FEFEFE";
	arr[120]="#A697B6";
	arr[121]="#202D35";
	arr[122]="#BB2225";
	arr[123]="#CB5049";
	arr[124]="#99BEDB";
	arr[125]="#005086";
	arr[126]="#8DAB85";
	arr[127]="#A37F9B";
	arr[128]="#FFDC48";
	arr[129]="#F79D7B";
	arr[130]="#EE5D60";
	arr[131]="#0B4642";
	arr[132]="#352C2D";
	arr[133]="#838EC4";
	arr[134]="#677689";
	arr[135]="#EAC7CB";
	arr[136]="#94CDBC";
	arr[137]="#F0AB8E";
	arr[138]="#7380B7";
	arr[139]="#AC809B";
	arr[140]="#E5636D";
	arr[141]="#EDD9D0";
	arr[142]="#A6C6BB";
	arr[143]="#B93D25";
	arr[144]="#FFEA9C";
	arr[145]="#B0D9F5";
	arr[146]="#DCA8AA";
	arr[147]="#F4F0ED";
	arr[148]="#FDBD97";
	arr[149]="#2692D0";
	arr[150]="#94C6EB";
	arr[151]="#90C5E7";
	arr[152]="#B9DDD9";
	arr[153]="#B0A7A2";
	arr[154]="#E6F3FC";
	arr[155]="#8D4A30";
	arr[156]="#93AFDF";
	arr[157]="#E9CDD9";
	arr[158]="#0E2247";
	arr[159]="#66A8E2";
	arr[160]="#A399B2";
	arr[161]="#62AADC";
	arr[162]="#E15754";
	arr[163]="#F2D1D8";
	arr[164]="#A8CFDE";
	arr[165]="#B91827";
	arr[166]="#3F4136";
	arr[167]="#A0C7E6";
	arr[168]="#153572";
	arr[169]="#A6C9E7";
	arr[170]="#168171";
	arr[171]="#AD2122";
	arr[172]="#E79693";
	arr[173]="#FBAA37";
	arr[174]="#1D4739";
	arr[175]="#24212A";
	arr[176]="#9C7681";
	arr[177]="#96B186";
	arr[178]="#5C6C8D";
	arr[179]="#0E2654";
	arr[180]="#FBE1E4";
	arr[181]="#EB332B";
	arr[182]="#FBCCB2";
	arr[183]="#EB6A30";
	arr[184]="#C61A26";
	arr[185]="#34282C";
	arr[186]="#0872BE";
	arr[187]="#95ACD8";
	arr[188]="#C21F20";
	arr[189]="#AF2522";
	arr[190]="#F27B81";
	arr[191]="#213430";
	arr[192]="#88B0E1";
	arr[193]="#A18DA8";
	arr[194]="#FCC338";
	arr[195]="#BA7385";
	arr[196]="#1184C7";
	arr[197]="#F17D2A";
	arr[198]="#3F453B";
	arr[199]="#1C1924";
	arr[200]="#B4768B";
	arr[201]="#1C3740";
	arr[202]="#192E43";
	arr[203]="#29324F";
	arr[204]="#EA8386";
	arr[205]="#007448";
	arr[206]="#862417";
	arr[207]="#C8ACC2";
	arr[208]="#AF201C";
	arr[209]="#005B7C";
	arr[210]="#8A9FCC";
	arr[211]="#FDD051";
	arr[212]="#F9992B";
	arr[213]="#F59D39";
	arr[214]="#292830";
	arr[215]="#343530";
	arr[216]="#233654";
	arr[217]="#203E36";
	arr[218]="#86C2DE";
	arr[219]="#A61A19";
	arr[220]="#094466";
	arr[221]="#F98786";
	arr[222]="#3B8B8C";
	arr[223]="#6593CE";
	arr[224]="#8785B4";
	arr[225]="#FDD74E";
	arr[226]="#834E3C";
	arr[227]="#1F2229";
	arr[228]="#7F6C8A";
	arr[229]="#EF978D";
	arr[230]="#FD9EA4";
	arr[231]="#897ABB";
	arr[232]="#28292B";
	arr[233]="#FAB62D";
	arr[234]="#0A2751";
	arr[235]="#BF4432";
	arr[236]="#DECC6A";
	arr[237]="#302424";
	arr[238]="#E59095";
	arr[239]="#08233E";

var c=0;
for (var i=1;i<32;i=i+2){
for (var j=1;j<31;j=j+2){
ctx.beginPath();
ctx.fillStyle = arr[c];
ctx.arc(pos*(i)+offset, pos*(j)+offset, radius, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();
  c++;
}
}

style.css

#DamienHirst{background:#f6f6f6;}