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 = [0, 100, 22]; this.baseColor = [ 255, 255, 255 ]; colorOne = [ 0, 200, 0 ]; this.partColor = {a:colorOne, b:colorOne , t:0.9 }; this.secondColor = [221, 221, 221]; this.colonColors = { a:[ 0, 200, 0 ] , b:this.bgColor }; this.alarm = { loopLength: 1, animation: {type: 'squeeze', from: 'side'}, bgColor: { a:[238,238,238], b: [128,128,128] } }; this.baseLineWidth = 0; this.partLineWidth = 1; 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: 2 }); this.t[0].push({ src: 1, type: 'shift', via: 'acc', to: 2 }); 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: 5 }); /* 1->2 (+0, +3, +4, +6, -5)*/ this.t[1].push({ src: 2, type: 'shift', to: 0 }); this.t[1].push({ src: 5, type: 'shift', to: 4 }); this.t[1].push({ src: 2, type: 'flip', to: 3 }); this.t[1].push({ src: 2, type: 'flip', to: 2 }); this.t[1].push({ src: 5, type: 'flip', to: 6 }); /* 2->3 (-4, +5) */ this.t[2].push({ src: 0, type: 'shift', via: 'acc', to: 0 }); this.t[2].push({ src: 2, type: 'shift', via: 'acc', to: 2 }); this.t[2].push({ src: 3, type: 'flip', via: 'acc', to: 3 }); this.t[2].push({ src: 4, type: 'shift', via: 'acc', to: 5 }); this.t[2].push({ src: 6, type: 'flip', via: 'acc', to: 6 }); /* 3->4 (-0, -6, +1) */ this.t[3].push({ src: 0, type: 'flip', via: 'acc', to: 1 }); this.t[3].push({ src: 2, type: 'shift', via: 'acc', to: 2 }); this.t[3].push({ src: 3, type: 'shift', via: 'acc', to: 3 }); this.t[3].push({ src: 5, type: 'flip', via: 'acc', to: 5 }); this.t[3].push({ src: 6, type: 'flip', via: 'acc', to: 5 }); /* 4->5 (+0, -2, +6) */ this.t[4].push({ src: 1, type: 'shift', via: 'acc', to: 1 }); 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: 'flip', via: 'acc', to: 5 }); this.t[4].push({ src: 2, type: 'flip', 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 = [[[[48.3636474609375,90.47159194946289],[47.3636474609375,239.4715919494629],[50.3636474609375,392.4715919494629],[51.3636474609375,499.4715919494629]],[[48.3636474609375,93.47159194946289],[202.3636474609375,93.47159194946289],[393.3636474609375,96.47159194946289],[456.3636474609375,95.47159194946289]],[[52.6136474609375,497.97158590821186],[206.3636474609375,500.47158590821186],[398.3636474609375,498.47158590821186],[458.6136474609375,498.97158590821186]],[[454.3636474609375,97.47159194946289],[458.3636474609375,318.4715919494629],[454.3636474609375,403.4715919494629],[456.3636474609375,497.4715919494629]],[[106.3636474609375,137.4715919494629],[106.3636474609375,162.4715919494629],[106.3636474609375,194.4715919494629],[105.3636474609375,231.4715919494629]],[[107.3636474609375,139.4715919494629],[136.3636474609375,137.4715919494629],[169.3636474609375,139.4715919494629],[193.3636474609375,139.4715919494629]],[[105.1136474609375,228.9715919494629],[134.1136474609375,226.9715919494629],[167.1136474609375,228.9715919494629],[191.1136474609375,228.9715919494629]],[[192.3636474609375,140.4715919494629],[192.3636474609375,127.47159194946289],[188.3636474609375,243.4715919494629],[192.3636474609375,229.4715919494629]],[[318.3636474609375,138.7215919494629],[318.3636474609375,125.72159194946289],[314.3636474609375,241.7215919494629],[318.3636474609375,227.7215919494629]],[[318.1136474609375,141.9715919494629],[347.1136474609375,139.9715919494629],[380.1136474609375,141.9715919494629],[404.1136474609375,141.9715919494629]],[[185.6136474609375,314.2215919494629],[188.6136474609375,298.2215919494629],[181.6136474609375,416.2215919494629],[185.6136474609375,429.2215919494629]],[[317.1136474609375,225.9715919494629],[346.1136474609375,223.9715919494629],[379.1136474609375,225.9715919494629],[403.1136474609375,225.9715919494629]],[[398.3636474609375,139.4715919494629],[399.3636474609375,150.4715919494629],[395.3636474609375,227.4715919494629],[397.3636474609375,224.4715919494629]],[[311.3636474609375,312.4715919494629],[313.6136474609375,307.2215919494629],[306.6136474609375,425.2215919494629],[312.3636474609375,425.4715919494629]],[[187.1136474609375,315.9715919494629],[171.3636474609375,316.4715919494629],[242.3636474609375,316.4715919494629],[227.3636474609375,314.4715919494629]],[[270.4261474609375,313.5965919494629],[254.6761474609375,314.0965919494629],[325.6761474609375,314.0965919494629],[310.3636474609375,315.4715919494629]],[[226.5042724609375,313.7528419494629],[223.3636474609375,323.4715919494629],[225.3636474609375,271.4715919494629],[227.3636474609375,278.4715919494629]],[[273.2191162109375,314.4325294494629],[270.0784912109375,324.1512794494629],[272.0784912109375,272.1512794494629],[274.0784912109375,279.1512794494629]],[[229.5042724609375,276.7528419494629],[213.7542724609375,277.2528419494629],[284.7542724609375,277.2528419494629],[269.4417724609375,278.6278419494629]],[[186.4261474609375,430.5965919494629],[170.6761474609375,431.0965919494629],[241.6761474609375,431.0965919494629],[226.6761474609375,429.0965919494629]],[[270.4261474609375,425.5965919494629],[254.6761474609375,426.0965919494629],[325.6761474609375,426.0965919494629],[310.6761474609375,424.0965919494629]],[[228.6136474609375,342.2215919494629],[231.6136474609375,326.2215919494629],[230.3636474609375,432.4715919494629],[228.3636474609375,430.4715919494629]],[[264.2386474609375,339.8465919494629],[267.2386474609375,323.8465919494629],[265.9886474609375,430.0965919494629],[263.9886474609375,428.0965919494629]],[[230.5042724609375,343.1164779663086],[214.7542724609375,343.6164779663086],[285.7542724609375,343.6164779663086],[270.4417724609375,344.9914779663086]]],[[[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