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.001; this.partLineWidth = 0.001; 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 = [[[[74.3636474609375,102.47159194946289],[74.3636474609375,111.47159194946289],[76.3636474609375,497.4715919494629],[76.3636474609375,504.4715919494629]],[[437.3636474609375,104.47159194946289],[439.3636474609375,112.47159194946289],[440.3636474609375,493.4715919494629],[441.3636474609375,503.4715919494629]],[[436.3636474609375,107.47159194946289],[354.3636474609375,102.47159194946289],[246.3636474609375,105.47159194946289],[73.3636474609375,104.47159194946289]],[[439.6136474609375,502.7215919494629],[356.3636474609375,501.4715849190702],[244.3636474609375,499.4715849190702],[76.6136474609375,499.7215919494629]],[[412.3636474609375,165.4715919494629],[315.3636474609375,165.4715919494629],[403.3636474609375,164.4715919494629],[306.3636474609375,166.4715919494629]],[[415.3636474609375,259.4715919494629],[318.3636474609375,259.4715919494629],[406.3636474609375,258.4715919494629],[309.3636474609375,260.4715919494629]],[[408.3636474609375,165.4715919494629],[411.3636474609375,253.4715919494629],[410.3636474609375,170.4715919494629],[412.3636474609375,258.4715919494629]],[[311.1136474609375,165.9715919494629],[314.1136474609375,253.9715919494629],[313.1136474609375,170.9715919494629],[315.1136474609375,258.9715919494629]],[[223.1136474609375,170.9715919494629],[226.1136474609375,258.9715919494629],[225.1136474609375,175.9715919494629],[227.1136474609375,263.9715919494629]],[[224.3636474609375,169.4715919494629],[127.3636474609375,169.4715919494629],[215.3636474609375,168.4715919494629],[118.3636474609375,170.4715919494629]],[[117.1136474609375,171.9715919494629],[120.1136474609375,259.9715919494629],[119.1136474609375,176.9715919494629],[121.1136474609375,264.9715919494629]],[[230.3636474609375,264.4715919494629],[133.3636474609375,264.4715919494629],[221.3636474609375,263.4715919494629],[124.3636474609375,265.4715919494629]],[[175.3636474609375,337.4715919494629],[176.3636474609375,450.4715919494629],[177.1136474609375,365.9715919494629],[177.3636474609375,463.4715919494629]],[[338.1761474609375,336.5965919494629],[339.3636474609375,446.4715919494629],[339.9261474609375,365.0965919494629],[343.3636474609375,460.47158572299406]],[[277.3636474609375,296.4715919494629],[272.3636474609375,299.4715919494629],[242.3636474609375,297.4715919494629],[236.8636474609375,297.9715919494629]],[[235.8636474609375,336.9715919494629],[243.8636474609375,338.9715919494629],[226.8636474609375,335.9715919494629],[174.8636474609375,337.9715919494629]],[[276.3636474609375,295.4715919494629],[277.3636474609375,349.4715919494629],[277.3636474609375,316.4715919494629],[277.3636474609375,342.4715919494629]],[[235.9886474609375,296.4715919494629],[236.7386474609375,329.9715919494629],[238.9886474609375,328.4715919494629],[237.7386474609375,334.9715919494629]],[[343.3636474609375,339.4715919494629],[351.3636474609375,341.4715919494629],[334.3636474609375,338.4715919494629],[277.3636474609375,339.4715919494629]],[[237.8636474609375,461.9715919494629],[245.8636474609375,463.9715919494629],[228.8636474609375,460.9715919494629],[176.8636474609375,462.9715919494629]],[[346.3636474609375,458.47158572299406],[340.1136474609375,459.2215919494629],[323.1136474609375,456.2215919494629],[276.3636474609375,457.47159415631245]],[[279.3636474609375,376.47159415631245],[279.1761474609375,446.59659415631245],[279.9261474609375,362.09659415631245],[280.1761474609375,459.59659415631245]],[[238.0667724609375,379.7528419494629],[237.8792724609375,449.8778419494629],[238.6292724609375,365.3778419494629],[238.8792724609375,462.8778419494629]],[[275.4886474609375,379.4602279663086],[270.4886474609375,382.4602279663086],[240.4886474609375,380.4602279663086],[234.9886474609375,380.9602279663086]]],[[[300,100],[300,231.86970218306007],[300,363.73940436612014],[300,495.6091065491803]]],[[[186.15384615384616,495.6091065491803],[223.0769230769231,495.6091065491803],[263.0769230769231,495.6091065491803],[423.0769230769231,495.6091065491803]],[[185.3636474609375,355.30492528279626],[185.3636474609375,423.30492528279626],[185.3636474609375,362.9715919494629],[185.3636474609375,496.30492528279626]],[[182.6713397686298,353.4715919494629],[219.59441669170673,353.4715919494629],[259.5944166917067,353.4715919494629],[419.5944166917067,353.4715919494629]],[[416.3636474609375,213.30492528279626],[416.3636474609375,281.30492528279626],[416.3636474609375,220.9715919494629],[416.3636474609375,354.30492528279626]],[[179.6713397686298,215.4715919494629],[216.59441669170673,215.4715919494629],[256.5944166917067,215.4715919494629],[416.5944166917067,215.4715919494629]]],[[[300.3636474609375,179.47159114553904],[300,233.33333333333331],[300,366.66666666666663],[300,500]],[[301.3636474609375,181.4715919494629],[295.3636474609375,181.4715919494629],[162.3636474609375,181.4715919494629],[155.3636474609375,179.4715919494629]],[[300.1136474609375,326.9715919494629],[294.1136474609375,326.9715919494629],[161.1136474609375,326.9715919494629],[154.1136474609375,324.9715919494629]],[[301.1136474609375,499.9715919494629],[295.1136474609375,499.9715919494629],[162.1136474609375,499.9715919494629],[155.1136474609375,497.9715919494629]]],[[[351.3636474609375,166.4715919494629],[353.3636474609375,240.5367408579328],[353.3636474609375,372.4064430409929],[353.3636474609375,504.27614522405304]],[[353.3636474609375,287.4715919494629],[344.3636474609375,288.4715919494629],[216.3636474609375,288.4715919494629],[209.3636474609375,288.4715919494629]],[[211.3636474609375,287.4715919494629],[211.3636474609375,277.4715919494629],[214.3636474609375,177.4715919494629],[213.3636474609375,169.4715919494629]]],[[[402.0559551532452,197.4715919494629],[300.51749361478363,197.4715919494629],[300.51749361478363,197.4715919494629],[214.36364746093747,197.4715919494629]],[[213.3636474609375,195.4715919494629],[215.3636474609375,261.4715919494629],[216.3636474609375,289.4715919494629],[216.3636474609375,310.4715919494629]],[[403.0559551532452,311.4715919494629],[301.51749361478363,311.4715919494629],[301.51749361478363,311.4715919494629],[215.36364746093747,311.4715919494629]],[[401.3636474609375,310.7215919494629],[403.3636474609375,376.7215919494629],[404.3636474609375,404.7215919494629],[404.3636474609375,425.7215919494629]],[[404.0944166917067,426.4715919494629],[294.40210899939905,426.4715919494629],[302.5559551532452,426.4715919494629],[216.40210899939902,426.4715919494629]]],[[[372.3636474609375,325.4715919494629],[371.3636474609375,394.4715919494629],[373.3636474609375,375.1382586161295],[373.3636474609375,508.4715919494629]],[[197.3636474609375,112.47159194946289],[205.3636474609375,113.47159194946289],[339.3636474609375,113.47159194946289],[375.3636474609375,112.47159194946289]],[[197.3636474609375,326.9715919494629],[205.3636474609375,327.9715919494629],[339.3636474609375,327.9715919494629],[375.3636474609375,326.9715919494629]],[[198.3636474609375,506.9715919494629],[206.3636474609375,507.9715919494629],[340.3636474609375,507.9715919494629],[376.3636474609375,506.9715919494629]],[[202.3636474609375,112.47159194946289],[202.3636474609375,245.8049252827962],[202.3636474609375,379.1382586161295],[202.3636474609375,512.4715919494629]]],[[[183.0769230769231,100],[300,100],[300,100],[401.53846153846155,100]],[[399.3636474609375,101.47159194946289],[399.3636474609375,234.8049252827962],[399.3636474609375,368.1382586161295],[399.3636474609375,501.4715919494629]]],[[[356.3636474609375,111.47159194946289],[356.3636474609375,244.8049252827962],[356.3636474609375,378.1382586161295],[356.3636474609375,511.4715919494629]],[[166.3636474609375,108.47159194946289],[166.3636474609375,241.8049252827962],[166.3636474609375,375.1382586161295],[166.3636474609375,508.4715919494629]],[[165.3636474609375,110.47159194946289],[173.3636474609375,112.47159194946289],[349.3636474609375,113.47159194946289],[357.3636474609375,109.47159194946289]],[[165.3636474609375,286.4715919494629],[173.3636474609375,288.4715919494629],[349.3636474609375,289.4715919494629],[357.3636474609375,285.4715919494629]],[[165.3636474609375,507.4715919494629],[173.3636474609375,509.4715919494629],[349.3636474609375,510.4715919494629],[357.3636474609375,506.4715919494629]]],[[[352.3636474609375,116.47159194946289],[286.3636474609375,113.47159194946289],[141.3636474609375,118.47159194946289],[159.3636474609375,119.47159194946289]],[[352.3636474609375,114.47159194946289],[352.3636474609375,247.8049252827962],[352.3636474609375,381.1382586161295],[352.3636474609375,514.4715919494629]],[[353.8636474609375,308.9715919494629],[287.8636474609375,305.9715919494629],[142.8636474609375,310.9715919494629],[160.8636474609375,311.9715919494629]],[[353.8636474609375,510.9715919494629],[287.8636474609375,507.9715919494629],[142.8636474609375,512.9715919494629],[160.8636474609375,513.9715919494629]],[[155.3636474609375,118.47159194946289],[155.3636474609375,251.8049252827962],[158.3636474609375,297.4715919494629],[157.3636474609375,314.4715919494629]]]];}

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