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() { this.digitPad = 4; this.groupPad = 15; this.heightFrac = 0.9; this.widthFrac = 0.9; this.secondsScale = { val:0.5, pos:'top' }; this.bgColor = [240, 240, 220]; this.baseColor = [ 255, 255, 255 ]; this.partColor = {a:[ 0, 200, 0 ], b:[200, 0, 0], t:0.9 }; this.secondColor = [221, 221, 221]; this.colonColors = { a:[ 0, 200, 0 ] , b:[200, 0, 0] }; this.alarm = { loopLength: 1, animation: {type: 'squeeze', from: 'side'}, bgColor: { a:[238,238,238], b: [128,128,128] } }; this.baseLineWidth = 0; this.partLineWidth = 3; this.colonRadius = 4; this.beginAniTime = 0.5; this.endAniTime = 1; this.lineCap = 'round'; this.lineGap = .5 this.baseInFront = false; this.pulsate = false; this.disableSlowest = true; this.t = new Array(); for (var i=0;i<=50;i++) this.t[i] = new Array(); /* 0->1 (-0, -1, -4, -6) */ this.t[0].push({ src: 0, type: 'shift', via: 'acc', to: 5 }); this.t[0].push({ src: 1, type: 'shift', via: 'acc', to: 5 }); this.t[0].push({ src: 2, type: 'shift', via: 'acc', to: 5 }); this.t[0].push({ src: 4, type: 'shift', via: 'acc', to: 2 }); this.t[0].push({ src: 5, type: 'shift', via: 'acc', to: 2 }); this.t[0].push({ src: 6, type: 'shift', via: 'acc', to: 2 }); /* 1->2 (+0, +3, +4, +6, -5)*/ this.t[1].push({ src: 2, type: 'shift', to: 6 }); this.t[1].push({ src: 5, type: 'shift', to: 4 }); this.t[1].push({ src: 2, type: 'shift', to: 3 }); this.t[1].push({ src: 5, type: 'shift', to: 2 }); this.t[1].push({ src: 5, type: 'shift', to: 0 }); /* 2->3 (-4, +5) */ this.t[2].push({ src: 0, type: 'shift', via: 'acc', to: 6 }); this.t[2].push({ src: 2, type: 'shift', via: 'acc', to: 5 }); this.t[2].push({ src: 3, type: 'shift', via: 'acc', to: 3 }); this.t[2].push({ src: 4, type: 'shift', via: 'acc', to: 2 }); this.t[2].push({ src: 6, type: 'shift', via: 'acc', to: 0 }); /* 3->4 (-0, -6, +1) */ this.t[3].push({ src: 0, type: 'shift', via: 'acc', to: 3 }); this.t[3].push({ src: 2, type: 'shift', via: 'acc', to: 2 }); this.t[3].push({ src: 3, type: 'shift', via: 'acc', to: 1 }); this.t[3].push({ src: 5, type: 'shift', via: 'acc', to: 1 }); this.t[3].push({ src: 6, type: 'shift', via: 'acc', to: 5 }); /* 4->5 (+0, -2, +6) */ this.t[4].push({ src: 1, type: 'shift', via: 'acc', to: 5 }); this.t[4].push({ src: 2, type: 'shift', via: 'acc', to: 0 }); this.t[4].push({ src: 3, type: 'shift', via: 'acc', to: 6 }); this.t[4].push({ src: 5, type: 'shift', via: 'acc', to: 1 }); this.t[4].push({ src: 5, type: 'shift', via: 'acc', to: 3 }); /* 5->6 (+4) */ this.t[5].push({ src: 0, type: 'shift', via: 'acc', to: 6 }); this.t[5].push({ src: 1, type: 'shift', via: 'acc', to: 3 }); this.t[5].push({ src: 3, type: 'shift', via: 'acc', to: 1 }); this.t[5].push({ src: 5, type: 'shift', via: 'acc', to: 5 }); this.t[5].push({ src: 6, type: 'shift', via: 'acc', to: 0 }); this.t[5].push({ src: 6, type: 'shift', via: 'acc', to: 4 }); /* 5->0 (+2, +4, -3) */ this.t[50].push({ src: 0, type: 'shift', via: 'acc', to: 1 }); this.t[50].push({ src: 1, type: 'shift', via: 'acc', to: 0 }); this.t[50].push({ src: 3, type: 'shift', via: 'acc', to: 2 }); this.t[50].push({ src: 5, type: 'shift', via: 'acc', to: 4 }); this.t[50].push({ src: 6, type: 'shift', via: 'acc', to: 5 }); this.t[50].push({ src: 3, type: 'shift', via: 'acc', to: 6 }); /* 6->7 (-1, -3, -4, -6, +2) */ this.t[6].push({ src: 0, type: 'shift', via: 'acc', to: 5 }); this.t[6].push({ src: 1, type: 'shift', via: 'acc', to: 0 }); this.t[6].push({ src: 3, type: 'shift', via: 'acc', to: 5 }); this.t[6].push({ src: 4, type: 'shift', via: 'acc', to: 2 }); this.t[6].push({ src: 5, type: 'shift', via: 'acc', to: 2 }); this.t[6].push({ src: 6, type: 'shift', via: 'acc', to: 0 }); /* 7->8 (+1, +3, +4, +6) */ this.t[7].push({ src: 0, type: 'shift', via: 'acc', to: 6 }); this.t[7].push({ src: 0, type: 'shift', via: 'acc', to: 4 }); this.t[7].push({ src: 2, type: 'shift', via: 'acc', to: 2 }); this.t[7].push({ src: 2, type: 'shift', via: 'acc', to: 4 }); this.t[7].push({ src: 2, type: 'shift', via: 'acc', to: 5 }); this.t[7].push({ src: 5, type: 'shift', via: 'acc', to: 3 }); this.t[7].push({ src: 5, type: 'shift', via: 'acc', to: 1 }); /* 8->9 (-4) */ this.t[8].push({ src: 0, type: 'shift', via: 'acc', to: 6 }); this.t[8].push({ src: 1, type: 'shift', via: 'acc', to: 5 }); this.t[8].push({ src: 2, type: 'shift', via: 'acc', to: 3 }); this.t[8].push({ src: 3, type: 'shift', via: 'acc', to: 2 }); this.t[8].push({ src: 4, type: 'shift', via: 'acc', to: 2 }); this.t[8].push({ src: 5, type: 'shift', via: 'acc', to: 1 }); this.t[8].push({ src: 6, type: 'shift', via: 'acc', to: 0 }); /* 9->0 (-3, +4) */ this.t[9].push({ src: 0, type: 'shift', via: 'acc', to: 6 }); this.t[9].push({ src: 1, type: 'shift', via: 'acc', to: 1 }); this.t[9].push({ src: 2, type: 'shift', via: 'acc', to: 2 }); this.t[9].push({ src: 3, type: 'shift', via: 'acc', to: 5 }); this.t[9].push({ src: 5, type: 'shift', via: 'acc', to: 4 }); this.t[9].push({ src: 6, type: 'shift', via: 'acc', to: 0 }); /* special cases */ /* leading 5->0 (+2, +4, -3) */ this.t[50].push({ src: 3, type: 'shift', to: 4 }); this.t[50].push({ src: 2, type: 'grow', mov: 1 }); /* (noon/midnight under 12hr) 1->nothing (-2, -5) */ this.t[10].push({ src: 2, type: 'shrink', mov: 0 }); this.t[10].push({ src: 5, type: 'shrink', mov: 0 }); /* (noon/midnight under 12hr) 2->1 (-0, -3, -4, -6, +5) */ this.t[21].push({ src: 0, type: 'shift', to: 2 }); this.t[21].push({ src: 3, type: 'shift', to: 2 }); this.t[21].push({ src: 4, type: 'shift', to: 5 }); this.t[21].push({ src: 6, type: 'shift', to: 5 }); this.t[21].push({ src: 2, type: 'shift', to: 2 }); /* (midnight under 24hr) 2->nothing (-0, -2, -3, -4, -6) */ 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 }); /* (midnight under 24hr) 3->0 (-3, +1, +4) */ this.t[30].push({ src: 3, type: 'flip', to: 1 }); this.t[30].push({ src: 3, type: 'flip', to: 4 }); /* (leading hr @ 9:59) nothing -> 1 (+2, +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]}); this.strokes = [[[[154,501],[263,498],[311,505],[445,503]],[[158,501],[116,508],[89,457],[159,454]],[[149.75,421.25],[258.75,418.25],[306.75,425.25],[440.75,423.25]],[[436.625,452.125],[457.875,445.875],[481,427],[438,425]],[[445,450],[400,460],[378,444],[152,448]],[[450,455],[405,465],[383,449],[157,453]],[[448.625,501.125],[469.875,494.875],[503.875,477.875],[449.625,454.125]],[[153.25,446.625],[120,428],[138,422],[154.625,419.5]],[[153,412],[171,398],[212,415],[259,411]],[[259,414],[278.25,393.25],[297,434],[366.25,406.25]],[[155,407],[283.25,398.25],[312,374],[422,400]],[[358,407],[283.25,398.25],[432,433],[417,403]],[[197,390],[298,384],[277,385],[406,385]],[[164,387],[301,352],[282,390],[399,377]],[[161,392],[272,382],[292,408],[404,377]],[[152,372],[284,367],[300,366.66666666666663],[435,371]],[[159,362],[283,351],[311,355],[432,369]],[[432.5,386.75],[440.5,418.75],[433,332],[435.5,382.75]],[[151.5,369.75],[159.5,401.75],[150.5,306.75],[154.5,365.75]],[[164,347],[153,343],[318,377],[425,353]],[[166,349],[200,182],[355,159],[425,354]],[[354,280],[354.25,351.75],[382.25,274.75],[353.25,281.75]],[[210.25,292.75],[210.25,356.75],[238.25,279.75],[208,292]],[[241.5625,255.4375],[241.5625,319.4375],[269.5625,242.4375],[239.3125,254.6875]],[[306.5625,239.4375],[306.5625,303.4375],[334.5625,226.4375],[304.3125,238.6875]],[[285.5625,287.4375],[285.5625,351.4375],[313.5625,274.4375],[283.3125,286.6875]],[[317.5625,319.4375],[317.5625,383.4375],[345.5625,306.4375],[315.3125,318.6875]],[[243.5625,314.4375],[243.5625,378.4375],[271.5625,301.4375],[241.3125,313.6875]]],[[[300,100],[300,231.86970218306007],[300,363.73940436612014],[300,495.6091065491803]]],[[[198.46153846153845,112.76158408223162],[604.6153846153846,55.334455712189325],[300,363.73940436612014],[186.15384615384616,495.6091065491803]],[[186.15384615384616,495.6091065491803],[223.0769230769231,495.6091065491803],[263.0769230769231,495.6091065491803],[423.0769230769231,495.6091065491803]]],[[[210.76923076923077,109.57118806167372],[407.6923076923077,87.23841591776838],[506.1538461538462,192.52148459617925],[210.76923076923077,275.4717811306848]],[[210.76923076923077,275.4717811306848],[460,256.32940500733736],[447.69230769230774,537.084254816433],[210.76923076923077,495.6091065491803]]],[[[207.69230769230768,112.76158408223162],[140,342.47009756240084],[306.1538461538462,307.37574133626384],[398.46153846153845,300.99494929514805]],[[395.38461538461536,100],[395.38461538461536,231.86970218306007],[395.38461538461536,363.73940436612014],[395.38461538461536,495.6091065491803]]],[[[401.53846153846155,100],[300,100],[300,100],[213.84615384615384,100]],[[216.9230769230769,103.1903960205579],[127.6923076923077,447.7531662408117],[404.61538461538464,141.47514826725276],[404.61538461538464,406.2780179735589]],[[404.61538461538464,406.2780179735589],[413.84615384615387,533.8938587958751],[201.53846153846155,524.3226707342014],[195.3846153846154,419.0396020557905]]],[[[312.3076923076923,106.38079204111581],[158.46153846153845,74.47683183553676],[56.92307692307692,463.7051463436012],[300,495.6091065491803]],[[300,495.6091065491803],[444.61538461538464,495.6091065491803],[447.69230769230774,285.0429691923585],[300,297.80455327459015]],[[300,297.80455327459015],[235.3846153846154,307.37574133626384],[192.30769230769232,339.2797015418429],[176.92307692307693,409.4684139941168]]],[[[183.0769230769231,100],[300,100],[300,100],[401.53846153846155,100]],[[401.53846153846155,100],[367.69230769230774,166.998316431716],[333.84615384615387,230.8062368428741],[183.0769230769231,495.6091065491803]]],[[[330.7692307692308,307.37574133626384],[278.46153846153845,278.6621771512427],[121.53846153846153,115.95198010278952],[303.0769230769231,106.38079204111581]],[[303.0769230769231,106.38079204111581],[503.0769230769231,115.95198010278952],[263.0769230769231,259.51980102789526],[235.3846153846154,316.94692939793754]],[[237.69230769230768,313.7565333773797],[130,412.6588100146747],[260,540.274650836991],[333.84615384615387,482.84752246694865]],[[333.84615384615387,482.84752246694865],[395.38461538461536,444.5627702202538],[410.7692307692308,367.993265726864],[330.7692307692308,307.37574133626384]]],[[[223.0769230769231,450.9435622613696],[450.7692307692308,645.5577195154018],[506.1538461538462,144.6655442878107],[361.53846153846155,106.38079204111581]],[[361.53846153846155,106.38079204111581],[173.84615384615384,84.04801989721048],[149.23076923076923,326.5181174596113],[315.38461538461536,316.94692939793754]],[[312.3076923076923,316.94692939793754],[386.1538461538462,316.94692939793754],[447.69230769230774,256.32940500733736],[435.3846153846154,218.0446527606425]]]];}

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