Click here for Tutorial Edit the code below, then click anywhere outside of textarea to update: Click here to draw your own digits! var testfont=new function() { // hi! // welcome to raunaksha4876's tutorial! //edited by me // at October 9, 2024 // time: 9:09pm // short date: 10/9/2024 // pace = [distance] and [time] \\ // control the commands //the drawing area //change the code here! this.digitPad = 15; this.groupPad = 25; this.heightFrac = 0.7; this.widthFrac = 0.7; // the seconds // change the code here! // the position means pos, try 'top', 'middle', or 'bottom' // anything else reverts to 'top' //val sets the fraction of the canvas this.secondsScale = {val:0.66, pos:'middle'}; // the colors //color parts are red, green, and blue // if you want to use alpha, try adding it // color is a value from 0 to 255 // the alpha is the value from 0 to 1 // the background // change the code here! hbarOrange = [255,132,0] hbarBlack = [0,0,0] hbarRed = [255,0,0] this.bgColor = hbarBlack; // the background layer for the digits // change the code here! this.baseColor = [ 100, 100, 100 ]; // the layer in front of the base // change the code here! hbarGold1 = [255,132,0] hbarGold2 = [0,125,255] this.partColor = { a:hbarGold1, b:hbarGold2}; // the background layer for the seconds // change the code here! this.secondColor = this.bgColor; // the color for the colons // change the code here! hbarWhite = [255,255,255] this.colonColors = [ hbarWhite , hbarOrange ]; // one other color varible we are gotta use // change the code here! var trans0 = {a:hbarGold2,b:hbarGold1} // the sizes // these are pixel values that set the width for the base and parts // change the code here! this.baseLineWidth = 0; this.partLineWidth = 7; this.colonRadius = 3.5; // the timing // change the code here! this.beginAniTime = 0.5; this.endAniTime = 1; // other, miscellaneous varibles // change the code here! this.lineCap = 'round' this.baseInFront = false; this.pulsate = false; this.disableSlowest = true; // now you are done with the first part with the tutorial // now you are learning how to control the transitons turnsNum1 = 1 turnsNum2 = 1 this.t = new Array(); for (var i=0;i<=50;i++) this.t[i] = new Array(); // control the commands for the zero // change the code here! this.t[0].push({ src: 0, type: 'loop',turns:turnsNum1,col:trans0, to: 2}); this.t[0].push({ src: 6, type: 'loop',turns:turnsNum2, to: 5}); this.t[0].push({ src: 1, type: 'loop',turns:turnsNum1, to: 2}); this.t[0].push({ src: 4, type: 'loop',turns:turnsNum2,col:trans0, to: 5}); this.t[0].push({ src: 2, type: 'shrink', mov: 0}); this.t[0].push({ src: 5, type: 'shrink', mov: 1}); // the commands for the one // change the code here! this.t[1].push({ src: 2, type: 'loop',turns:turnsNum2, to: 0,col:trans0}); this.t[1].push({ src: 5, type: 'loop',turns:turnsNum1, to: 6}); this.t[1].push({ src: 2, type: 'grow', mov: 0}); this.t[1].push({ src: 2, type: 'loop',turns:turnsNum2,col:trans0, to: 4}); this.t[1].push({ src: 2, type: 'loop',turns:turnsNum1, to: 3}); // the commands for the two // change the code here! this.t[2].push({ src: 2, type: 'loop',turns:turnsNum1,col:trans0, to: 5}); this.t[2].push({ src: 0, type: 'grow', mov: 1}); this.t[2].push({ src: 3, type: 'loop',turns:turnsNum2,col:trans0, to: 6}); this.t[2].push({ src: 3, type: 'grow', mov: 1}); this.t[2].push({ src: 4, type: 'loop',turns:turnsNum1,col:trans0, to: 6}); this.t[2].push({ src: 3, type: 'loop',turns:turnsNum2, to: 5}); this.t[2].push({ src: 0, type: 'loop',turns:turnsNum1,col:trans0, to: 2}); this.t[2].push({ src: 6, type: 'shrink', mov: 0}); // the commands for the three //change the code here! this.t[3].push({ src: 0, type: 'loop',turns:turnsNum2,col:trans0, to: 2}); this.t[3].push({ src: 3, type: 'grow', mov: 0}); this.t[3].push({ src: 5, type: 'loop',turns:turnsNum1,col:trans0, to: 5}); this.t[3].push({ src: 3, type: 'loop',turns:turnsNum2, to: 1}); this.t[3].push({ src: 6, type: 'shrink', mov: 0}); this.t[3].push({ src: 2, type: 'shrink', mov: 0}); // these commands for the four // change the code here! this.t[4].push({ src: 1, type: 'loop',turns:turnsNum1,col:trans0, to: 0}); this.t[4].push({ src: 3, type: 'loop',turns:turnsNum2, to: 3}); this.t[4].push({ src: 5, type: 'loop',turns:2, to: 6}); this.t[4].push({ src: 2, type: 'loop',turns:2, to: 5}); this.t[4].push({ src: 1, type: 'grow', mov: 0}); this.t[5].push({ src: 1, type: 'loop',turns:2, to: 0}); this.t[5].push({ src: 6, type: 'loop',turns:2, to: 4}); this.t[5].push({ src: 5, type: 'loop',turns:2, to: 6}); this.t[5].push({ src: 3, type: 'loop',turns:2, to: 3}); this.t[5].push({ src: 0, type: 'shrink', mov: 0}); this.t[5].push({ src: 1, type: 'grow', mov: 0}); this.t[5].push({ src: 5, type: 'grow', mov: 1}); this.t[50].push({ src: 0, type: 'loop',turns:2, to: 2}); this.t[50].push({ src: 6, type: 'loop',turns:2, to: 4}); this.t[50].push({ src: 1, type: 'grow', mov: 0}); this.t[50].push({ src: 1, type: 'loop',turns:2, to: 0}); this.t[50].push({ src: 5, type: 'grow', mov: 1}); this.t[50].push({ src: 5, type: 'loop',turns:2, to: 6}); this.t[50].push({ src: 3, type: 'shrink', mov: 0}); this.t[50].push({ src: 3, type: 'shrink', mov: 1}); this.t[6].push({ src: 0, type: 'loop',turns:2, to: 2}); this.t[6].push({ src: 3, type: 'shrink', mov: 0}); this.t[6].push({ src: 6, type: 'loop',turns:2, to: 5}); this.t[6].push({ src: 1, type: 'loop',turns:2, to: 0}); this.t[6].push({ src: 5, type: 'loop',turns:2, to: 5}); this.t[6].push({ src: 1, type: 'loop',turns:2, to: 2}); this.t[6].push({ src: 4, type: 'loop',turns:2, to: 2}); this.t[7].push({ src: 0, type: 'loop',turns:2, to: 1,}); this.t[7].push({ src: 5, type: 'loop',turns:2, to: 6,}); this.t[7].push({ src: 0, type: 'loop',turns:2, to: 2}); this.t[7].push({ src: 0, type: 'grow', mov: 1}); this.t[7].push({ src: 2, type: 'loop',turns:2, to: 4}); this.t[7].push({ src: 5, type: 'loop',turns:2, to: 5}); this.t[7].push({ src: 2, type: 'loop', to: 3}); this.t[7].push({ src: 2, type: 'shrink', mov: 0}); this.t[8].push({ src: 1, type: 'loop',turns:2, to: 0}); this.t[8].push({ src: 4, type: 'loop',turns:2, to: 1}); this.t[8].push({ src: 6, type: 'loop',turns:2, to: 6}); this.t[8].push({ src: 3, type: 'shrink', mov: 0}); this.t[8].push({ src: 0, type: 'shrink', mov: 0}); this.t[8].push({ src: 2, type: 'loop',turns:2, to: 2}); this.t[8].push({ src: 5, type: 'loop',turns:2, to: 5}); this.t[8].push({ src: 4, type: 'loop',turns:2, to: 3,}); this.t[9].push({ src: 0, type: 'loop',turns:2, to: 0}); this.t[9].push({ src: 1, type: 'shrink', mov: 1}); this.t[9].push({ src: 2, type: 'loop',turns:2, to: 2}); this.t[9].push({ src: 3, type: 'loop',turns:2, to: 1}); this.t[9].push({ src: 5, type: 'grow', mov: 1}); this.t[9].push({ src: 5, type: 'loop',turns:2, to: 6}); this.t[9].push({ src: 6, type: 'loop',turns:2, to: 4}); this.t[10].push({ src: 2, type: 'shrink', mov: 0}); this.t[10].push({ src: 5, type: 'shrink', mov: 0}); this.t[21].push({ src: 0, type: 'loop',turns:2, to: 2}); this.t[21].push({ src: 2, type: 'loop',turns:2, to: 2}); this.t[21].push({ src: 3, type: 'loop',turns:2, to: 5}); this.t[21].push({ src: 4, type: 'loop',turns:2, to: 5}); this.t[21].push({ src: 6, type: 'loop',turns:2, to: 5}); this.t[20].push({ src: 0, type: 'shrink', mov: 0}); this.t[20].push({ src: 2, type: 'shrink', mov: 0}); this.t[20].push({ src: 3, type: 'shrink', mov: 0}); this.t[20].push({ src: 4, type: 'shrink', mov: 0}); this.t[20].push({ src: 6, type: 'shrink', mov: 0}); this.t[30].push({ src: 0, type: 'loop',turns:2, to: 2}); this.t[30].push({ src: 2, type: 'loop',turns:2, to: 2}); this.t[30].push({ src: 3, type: 'loop',turns:2, to: 2}); this.t[30].push({ src: 5, type: 'loop',turns:2, to: 5}); this.t[30].push({ src: 6, type: 'loop',turns:2, to: 5}); this.t[11].push({ src: 5, type: 'grow', mov: 0, t:[.9,.95]}); this.t[11].push({ src: 2, type: 'grow', mov: 0, t:[.95,1]}); }

TO SAVE WORK: font name: (new or previous) letters/numbers, no spaces author username: (create now OR recall) letters/numbers, no spaces password: (create now OR recall) remember what you type here - it creates an instant account (nothing is saved till you hit save) see previous versions of this font

animaclock: a customizable online clock and alarm clock