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.7; this.widthFrac = 0.7; this.secondsScale = {val:0.6, pos:'middle'}; this.bgColor = [60, 50, 80]; this.baseColor = [ 100, 100, 100 ]; this.partColor = { a:[ 250, 50, 250 ], b:[ 0, 200, 200 ]}; this.secondColor = this.bgColor; this.colonColors = [ [200, 50, 200] , [0, 200, 200] ]; this.baseLineWidth = 7; this.partLineWidth = 5; this.colonRadius = 4; this.beginAniTime = 0; this.endAniTime = 1; this.baseInFront = false; this.pulsate = false; this.sevenSegment = false; this.disableSlowest = true; var trans0={a:[ 250, 50, 250 ], b:[ 150, 0, 150 ]}; this.t = new Array(); for (var i=0;i<=50;i++) this.t[i] = new Array(); this.t[0].push({ src: 0, type: 'shift', to: 2}); this.t[0].push({ src: 6, type: 'flip', to: 5}); this.t[0].push({ src: 1, type: 'shift', to: 2}); this.t[0].push({ src: 4, type: 'shift', to: 5}); this.t[0].push({ src: 2, type: 'shrink', mov: 0}); this.t[0].push({ src: 5, type: 'shrink', mov: 1}); this.t[1].push({ src: 2, type: 'shift', to: 0}); this.t[1].push({ src: 5, type: 'shift', to: 6}); this.t[1].push({ src: 2, type: 'grow', mov: 0}); this.t[1].push({ src: 2, type: 'shift', to: 4}); this.t[1].push({ src: 2, type: 'shift', to: 3}); this.t[2].push({ src: 2, type: 'shift', to: 5}); this.t[2].push({ src: 0, type: 'grow', mov: 1}); this.t[2].push({ src: 3, type: 'shift', to: 6}); this.t[2].push({ src: 3, type: 'grow', mov: 1}); this.t[2].push({ src: 4, type: 'shift', to: 6}); this.t[2].push({ src: 3, type: 'shift', to: 5}); this.t[2].push({ src: 0, type: 'shift', to: 2}); this.t[2].push({ src: 6, type: 'shrink', mov: 0}); this.t[3].push({ src: 0, type: 'shift', to: 2}); this.t[3].push({ src: 3, type: 'grow', mov: 0}); this.t[3].push({ src: 5, type: 'shift', to: 5}); this.t[3].push({ src: 3, type: 'shift', to: 1}); this.t[3].push({ src: 6, type: 'shrink', mov: 0}); this.t[3].push({ src: 2, type: 'shrink', mov: 0}); this.t[4].push({ src: 1, type: 'flip', to: 0}); this.t[4].push({ src: 3, type: 'shift', to: 3}); this.t[4].push({ src: 5, type: 'flip', to: 6}); this.t[4].push({ src: 2, type: 'shift', to: 5}); this.t[4].push({ src: 1, type: 'grow', mov: 0}); this.t[5].push({ src: 1, type: 'flip', to: 0}); this.t[5].push({ src: 6, type: 'shift', to: 4}); this.t[5].push({ src: 5, type: 'flip', to: 6}); this.t[5].push({ src: 3, type: 'shift', 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: 'shift', to: 2}); this.t[50].push({ src: 6, type: 'shift', to: 4}); this.t[50].push({ src: 1, type: 'grow', mov: 0}); this.t[50].push({ src: 1, type: 'flip', to: 0}); this.t[50].push({ src: 5, type: 'grow', mov: 1}); this.t[50].push({ src: 5, type: 'flip', 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: 'shift', to: 2}); this.t[6].push({ src: 3, type: 'shrink', mov: 0}); this.t[6].push({ src: 6, type: 'shift', to: 5}); this.t[6].push({ src: 1, type: 'flip', to: 0}); this.t[6].push({ src: 5, type: 'shift', to: 5}); this.t[6].push({ src: 1, type: 'shift', to: 2}); this.t[6].push({ src: 4, type: 'shift', to: 2}); this.t[7].push({ src: 0, type: 'shift', to: 1,}); this.t[7].push({ src: 5, type: 'flip', to: 6,}); this.t[7].push({ src: 0, type: 'shift', to: 2}); this.t[7].push({ src: 0, type: 'grow', mov: 1}); this.t[7].push({ src: 2, type: 'shift', to: 4}); this.t[7].push({ src: 5, type: 'shift', to: 4}); this.t[7].push({ src: 2, type: 'flip', to: 3}); this.t[7].push({ src: 2, type: 'shift', to: 5}); this.t[8].push({ src: 1, type: 'flip', to: 0}); this.t[8].push({ src: 4, type: 'shift', to: 1}); this.t[8].push({ src: 6, type: 'shift', 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: 'shift', to: 2}); this.t[8].push({ src: 5, type: 'shift', to: 5}); this.t[8].push({ src: 4, type: 'flip', to: 3,}); this.t[9].push({ src: 0, type: 'shift', to: 0}); this.t[9].push({ src: 1, type: 'shrink', mov: 1}); this.t[9].push({ src: 2, type: 'shift', to: 2}); this.t[9].push({ src: 3, type: 'shift', to: 1}); this.t[9].push({ src: 5, type: 'grow', mov: 1}); this.t[9].push({ src: 5, type: 'flip', to: 6}); this.t[9].push({ src: 6, type: 'shift', 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: 'grow', mov: 1}); this.t[21].push({ src: 0, type: 'shift', to: 2}); this.t[21].push({ src: 1, type: 'shift', to: 3}); 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: 3, type: 'flip', to: 1}); this.t[30].push({ src: 3, type: 'flip', to: 4}); 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 = [[[[371.5,137],[100,100],[100,495.6091065491803],[300,495.6091065491803]],[[300,495.6091065491803],[500,495.6091065491803],[486.5,107],[149.5,316]],[[300,495.6091065491803],[288.66666666666663,487.94243988251355],[277.3333333333333,480.2757732158469],[266,472.6091065491803]],[[266,472.6091065491803],[272.3333333333333,461.9424398825136],[278.66666666666663,451.2757732158469],[285,440.6091065491803]],[[285,440.6091065491803],[293.3333333333333,430.2757732158469],[301.66666666666663,419.9424398825136],[310,409.6091065491803]],[[310,409.6091065491803],[298,401.6091065491803],[286,393.6091065491803],[274,385.6091065491803]],[[274,385.6091065491803],[282,376.6091065491803],[290,367.6091065491803],[298,358.6091065491803]],[[298,358.6091065491803],[305,351.2757732158469],[312,343.9424398825136],[319,336.6091065491803]],[[319,336.6091065491803],[312.66666666666663,328.2757732158469],[306.3333333333333,319.9424398825136],[300,311.6091065491803]],[[300,298.6091065491803],[291.3333333333333,304.2757732158469],[282.66666666666663,309.9424398825136],[343.5,237]]],[[[445.5,220],[300,231.86970218306007],[300,363.73940436612014],[300,495.6091065491803]],[[300,495.6091065491803],[292.66666666666663,487.2757732158469],[285.3333333333333,478.9424398825136],[499.5,342]],[[499.5,342],[489.16666666666663,336.66666666666663],[478.8333333333333,331.3333333333333],[445.5,223]]],[[[23.5,509],[604.6153846153846,55.334455712189325],[300,363.73940436612014],[377.5,69]],[[105.5,88],[434.5,273],[263.0769230769231,495.6091065491803],[122.5,236]]],[[[548.5,387],[407.6923076923077,87.23841591776838],[506.1538461538462,192.52148459617925],[554.5,343]],[[575.5,301],[460,256.32940500733736],[447.69230769230774,537.084254816433],[549.5,242]]],[[[207.69230769230768,112.76158408223162],[140,342.47009756240084],[306.1538461538462,307.37574133626384],[27.5,230]],[[395.38461538461536,100],[64.5,245],[395.38461538461536,363.73940436612014],[264.5,113]]],[[[40.5,177],[300,100],[300,100],[202.5,366]],[[31.5,347],[127.6923076923077,447.7531662408117],[404.61538461538464,141.47514826725276],[184.5,392]],[[404.61538461538464,406.2780179735589],[413.84615384615387,533.8938587958751],[201.53846153846155,524.3226707342014],[284.5,42]]],[[[126.5,520],[158.46153846153845,74.47683183553676],[56.92307692307692,463.7051463436012],[577.5,182]],[[200.5,114],[444.61538461538464,495.6091065491803],[447.69230769230774,285.0429691923585],[300,297.80455327459015]],[[300,297.80455327459015],[235.3846153846154,307.37574133626384],[250.5,76],[158.5,355]]],[[[401.5,101],[400.5,99],[300,100],[401.53846153846155,100]],[[401.53846153846155,100],[367.69230769230774,166.998316431716],[333.84615384615387,230.8062368428741],[372.5,156]]],[[[126.5,357],[157.5,182],[121.53846153846153,115.95198010278952],[303.0769230769231,106.38079204111581]],[[303.0769230769231,106.38079204111581],[503.0769230769231,115.95198010278952],[263.0769230769231,259.51980102789526],[513.5,86]],[[124.5,360],[130,412.6588100146747],[260,540.274650836991],[333.84615384615387,482.84752246694865]],[[333.84615384615387,482.84752246694865],[395.38461538461536,444.5627702202538],[410.7692307692308,367.993265726864],[514.5,84]]],[[[558.5,338],[450.7692307692308,645.5577195154018],[506.1538461538462,144.6655442878107],[249.5,358]],[[361.53846153846155,106.38079204111581],[173.84615384615384,84.04801989721048],[149.23076923076923,326.5181174596113],[87.5,273]],[[113.5,133],[159.5,45],[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