edit clock font - animaclock

animaclock.com | about | gallery | Graph-Based Visual Saliency
Click here for Tutorial
Edit the code below, then click anywhere outside of textarea to update:
var testfont=new function() {

this.digitPad = 4;
this.groupPad = 15;
this.heightFrac = .7;
this.widthFrac = .7;
this.secondsScale = {val:0.66, pos:'top'};


this.bgColor = [60, 50, 80];
this.baseColor = [ 100, 100, 100,1 ];
this.partColor = { a:[ 250, 50, 250,1 ], b:[ 0, 200, 200,1 ]};
this.secondColor = this.baseColor;
this.colonColors = [ [200, 50, 200] , [0, 200, 200] ];

this.baseLineWidth = 0;
this.partLineWidth = 5;
this.colonRadius = 4;
this.beginAniTime = 0;
this.endAniTime = 1;
this.connected = false
this.baseInFront = true;
this.pulsate = false;
this.sevenSegment = false 
this.disableSlowest = true;

var trans0={a:[ 250, 50, 250, .25 ], b:[ 0, 200, 200 ,.5]};
trans1={a:[250,250,50,.25],b:[0,200,200,.5]}
this.t = new Array();
for (var i=0;i<=50;i++)
this.t[i] = new Array();
this.t[0].push({ src: 0, type: 'shift', turns: 2, via: 'osc', to: 0 });
this.t[0].push({ src: 1, type: 'flip', turns: 2, via: 'osc', to: 0  });
this.t[0].push({ src: 1, type: 'loop',turns:0, to: 0 , col:trans0 });
this.t[0].push({ src: 4, type: 'shrink', mov: 1  });
this.t[0].push({ src: 2, type: 'flip' , to:0, via:'osc'  });
this.t[0].push({ src: 5, type: 'shrink', mov: 0  }); 
this.t[0].push({ src: 3, type: 'shift' , to:0, via:'osc'  });

this.t[1].push({ src: 0, type: 'loop', turns: 1, via: 'osc', to: 0  });    
this.t[1].push({ src: 0, type: 'loop', turns: 1, via: 'osc', to: 1  });    
this.t[1].push({ src: 0, type: 'loop', to: 1,turns:0,col:trans0 });
this.t[1].push({ src: 4, type: 'grow', mov: 1 });
this.t[1].push({ src: 3, type: 'grow', mov: 1 }); 
this.t[1].push({ src: 0, type: 'loop', turns: 1, via: 'osc', to: 2 });   

this.t[2].push({ src: 0, type: 'loop', turns: 1, via: 'osc', to: 0 });    
this.t[2].push({ src: 1, type: 'loop', turns: 1, via: 'osc', to: 1 });    
this.t[2].push({ src: 1, type: 'loop',turns:1, to: 0,col:trans0 });
this.t[2].push({ src: 2, type: 'loop', to: 2 });
this.t[2].push({ src: 5, type: 'grow', mov: 0 });
this.t[2].push({ src: 4, type: 'loop', to: 0,col:trans0 }); 
this.t[2].push({ src: 3, type: 'flip', via: 'osc', to: 3 }); 
this.t[2].push({ src: 4, type: 'loop', turns: 1, via: 'osc', to: 0 });      

this.t[3].push({ src: 0, type: 'loop', turns: 1, via: 'osc', to: 1  });    
this.t[3].push({ src: 0, type: 'loop', turns: 0, via: 'acc', to: 1,col:trans0  });    
this.t[3].push({ src: 1, type: 'loop', to: 0});
this.t[3].push({ src: 2, type: 'loop', to: 2});
this.t[3].push({ src: 1, type: 'loop', to: 0,turns:0,col:trans0});
this.t[3].push({ src: 3, type: 'loop', to: 2, turns:0});

this.t[4].push({ src: 1, type: 'loop', turns: 1, via: 'acc', to: 0  });    
this.t[4].push({ src: 1, type: 'loop', turns: 0, via: 'acc', to: 0, col:trans0  });    
this.t[4].push({ src: 0, type: 'loop', to: 2});
this.t[4].push({ src: 0, type: 'loop', to: 3,turns:0,col:trans0});
this.t[4].push({ src: 2, type: 'shift', to:4});
this.t[4].push({ src: 1, type: 'grow', mov: 0}); 
this.t[4].push({ src: 1, type: 'loop', turns: 1, via: 'acc', to: 0  });
this.t[4].push({ src: 1, type: 'loop', turns: 1, via: 'acc', to: 3 }); 

this.t[5].push({ src: 0, type: 'loop', turns: 1, via: 'osc', to: 0  });    
this.t[5].push({ src: 2, type: 'loop', turns: 1, via: 'osc', to: 2,  });    
this.t[5].push({ src: 2, type: 'loop', to: 2,turns:0,col:trans0});
this.t[5].push({ src: 3, type: 'loop', to: 3});
this.t[5].push({ src: 1, type: 'loop', to: 1});
this.t[5].push({ src: 4, type: 'loop', to: 5,col:trans0});

this.t[50].push({ src: 1, type: 'loop', turns: 0, via: 'acc', to:1, col:trans0  });    
this.t[50].push({ src: 0, type: 'loop', turns: 0, via: 'osc', to: 0, col:trans0  });    
this.t[50].push({ src: 2, type: 'loop', to: 0});
this.t[50].push({ src: 1, type: 'loop', to: 1});
this.t[50].push({ src: 0, type: 'loop', to: 1,turns:3});
this.t[50].push({ src: 0, type: 'loop', to: 0,turns:1});
this.t[50].push({ src: 0, type: 'loop', to: 1,turns:2,col:trans0 });
this.t[50].push({src:2,type:'loop',to:1,col:trans0})
this.t[50].push({src:0,type:'loop',to:1})
this.t[50].push({src:0,type:'loop',to:1,turns:0,col:trans0})
this.t[50].push({src:2,type:'loop',to:1,turns:0,col:trans0})
this.t[50].push({src:2,type:'loop',turns:0,to:0,col:trans0})
this.t[50].push({src:0,type:'loop',to:1,turns:4,col:trans0})
this.t[50].push({src:0,type:'loop',to:1,turns:5,col:trans0})
this.t[50].push({src:0,type:'loop',to:1,turns:6,col:trans0})
this.t[50].push({src:0,type:'loop',to:1,turns:7,col:trans0})
this.t[50].push({src:0,type:'loop',to:1,turns:8,col:trans0})
this.t[50].push({src:0,type:'loop',to:1,turns:9,col:trans0})
this.t[50].push({src:0,type:'loop',to:1,turns:10,col:trans0})
this.t[50].push({src:0,type:'loop',to:1,turns:11,col:trans0})
this.t[50].push({src:0,type:'loop',to:0,turns:1,col:trans0})
this.t[50].push({src:0,type:'loop',turns:2,col:trans0,to:0})
this.t[50].push({src:0,type:'loop',turns:3,col:trans0,to:0})
this.t[50].push({src:0,type:'loop',turns:4,col:trans0,to:0})
this.t[50].push({src:0,type:'loop',turns:5,col:trans0,to:0})
this.t[50].push({src:0,type:'loop',turns:6,col:trans0,to:0})
this.t[50].push({src:0,type:'loop',turns:7,col:trans0,to:0})
this.t[50].push({src:0,type:'loop',turns:8,col:trans0,to:0})
this.t[50].push({src:0,type:'loop',turns:9,to:0,col:trans0})
this.t[50].push({src:0,turns:10,type:'loop',col:trans0,to:0})
this.t[50].push({src:0,type:'loop',turns:11,col:trans0,to:0})

this.t[6].push({ src: 0, type: 'loop', turns: 1, via: 'osc', to: 2  });    
this.t[6].push({ src: 0, type: 'loop', turns: 0, via: 'osc', to: 1, col:trans0  });    
this.t[6].push({ src: 3, type: 'shrink', mov: 1});
this.t[6].push({ src: 0, type: 'loop', to: 0});
this.t[6].push({ src: 0, type: 'loop', to: 1});
this.t[6].push({ src: 1, type: 'shrink', mov: 0});
this.t[6].push({ src: 2, type: 'loop',turns:0, to: 1});


this.t[7].push({ src: 1, type: 'loop', turns: 1, via: 'osc', to: 0, col:trans0  });    
this.t[7].push({ src: 5, type: 'loop', turns: 1, via: 'osc', to: 6, col:trans0  });    
this.t[7].push({ src: 3, type: 'grow', mov: 1 });    
this.t[7].push({ src: 1, type: 'grow', mov: 0 });    
this.t[7].push({ src: 0, type: 'loop', to: 1 });    
this.t[7].push({ src: 0, type: 'loop', to: 1,col:trans0,turns:0 });    
this.t[7].push({ src: 2, type: 'grow', mov: 1 });    
this.t[7].push({ src: 1, type: 'loop', to: 0 });

this.t[8].push({ src: 0, type: 'loop', turns: 1, via: 'osc', to: 2,  });    
this.t[8].push({ src: 2, type: 'loop', turns: 1, via: 'osc', to: 0,   });  
this.t[8].push({ src: 2, type: 'loop', to: 2 });    
this.t[8].push({ src: 0, type: 'loop', to: 2,col:trans0,turns:0 });    
this.t[8].push({ src: 3, type: 'loop', to: 2 });    
this.t[8].push({ src: 1, type: 'loop', to: 1 });    
this.t[8].push({ src: 4, type: 'shrink', mov: 1 });  

this.t[9].push({ src: 0, type: 'loop', turns: 1, via: 'osc', to: 0  });    
this.t[9].push({ src: 0, type: 'loop', turns: 0, via: 'acc', to: 0, col:trans0  });
this.t[9].push({ src: 1, type: 'loop', to: 1 });        
this.t[9].push({ src: 2, type: 'loop', to: 1 });   
this.t[9].push({ src: 2, type: 'loop', to: 1,col:trans0,turns:0 }); 
this.t[9].push({ src: 3, type: 'shrink', mov: 1 });      
this.t[9].push({ src: 4, type: 'grow', mov: 1 });      

this.t[10].push({ src: 0, type: 'shrink', mov: 0 });
this.t[10].push({ src: 5, type: 'shrink', mov: 0 });

this.t[21].push({ src: 0, type: 'shrink', mov: 0,t:[0,.25] });
this.t[21].push({ src: 1, type: 'shrink', mov: 0,t:[.25,.5] });
this.t[21].push({ src: 0, type: 'grow', mov: 0,t:[.5,1] });
this.t[21].push({ src: 2, type: 'loop', to: 0,turns:2,col:trans0 });
this.t[21].push({ src: 2, type: 'loop', to: 0 });
this.t[21].push({src:1,type:'loop',to:0,col:trans0,turns:2})
this.t[21].push({src:3,to:0,type:'loop'})


this.t[20].push({ src: 0, type: 'shrink', mov: 0,t:[0,.5] });
this.t[20].push({ src: 1, type: 'shrink', mov: 0,t:[.5,1] });
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[20].push({ src: 2, type: 'shrink', mov: 0 });

this.t[30].push({ src: 0, type: 'shrink', mov: 0,t:[0,.25] });
this.t[30].push({ src: 1, type: 'shrink', mov: 0 ,t:[.25,.5]});

this.t[30].push({src:1,type:'grow',mov:1,t:[.5,.75]})
this.t[30].push({src:0,type:'grow',mov:1,t:[.75,1]})
this.t[30].push({src:2,type:'loop',to:2})
this.t[30].push({src:3,turns:2,type:'loop',col:trans0,to:3})
this.t[30].push({src:3,type:'loop',to:3})
this.t[30].push({src:0,type:'loop',col:trans0,turns:2,to:0})
this.t[30].push({src:0,type:'loop',to:1})
this.t[30].push({src:0,turns:2,type:'loop',col:trans0,turns:2,to:1})
this.t[30].push({src:1,type:'loop',to:0})
this.t[30].push({src:1,col:trans0,to:0,type:'loop',turns:2})
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 = [[[[437.265625,105],[291.265625,97],[249.265625,103],[181.265625,105]],[[441.265625,498],[454.265625,462],[425.265625,107],[435.265625,103]],[[443.265625,497],[351.265625,490],[324.265625,484],[176.265625,483]],[[181.265625,484],[164.265625,405],[177.265625,138],[185.265625,104]]],[[[300,100],[300,231.86970218306007],[300,363.73940436612014],[300,495.6091065491803]]],[[[198,113],[329.265625,99],[345.265625,119],[417,121]],[[186.15384615384616,495.6091065491803],[223.0769230769231,495.6091065491803],[263.0769230769231,495.6091065491803],[423.0769230769231,495.6091065491803]],[[417.265625,116],[424.265625,199],[409.265625,265],[404.265625,267]],[[405.265625,267],[308.265625,259],[325.265625,277],[188.265625,266]],[[189.265625,268],[195.265625,306],[159.265625,393],[187.265625,499]]],[[[210.76923076923077,109.57118806167372],[227.265625,101],[341.265625,107],[376.265625,109]],[[377.265625,484],[314.265625,487],[364.265625,485],[210.265625,480]],[[375.265625,108],[377.265625,240],[376.265625,369],[376.265625,484]],[[211.265625,292],[308.265625,290],[311.265625,292],[377.265625,289]]],[[[196.265625,122],[190.265625,206],[168.265625,244],[190.265625,299]],[[395.38461538461536,100],[395.38461538461536,231.86970218306007],[395.38461538461536,363.73940436612014],[395.38461538461536,495.6091065491803]],[[190.265625,302],[322.265625,304],[292.265625,300],[398.265625,290]]],[[[401.53846153846155,100],[300,100],[300,100],[213.84615384615384,100]],[[216.9230769230769,103.1903960205579],[213.265625,235],[235.265625,128],[207.265625,269]],[[403.265625,484],[415.265625,486],[213.265625,484],[212.265625,486]],[[209.265625,262],[304.265625,270],[297.265625,264],[400.265625,268]],[[397.265625,269],[391.265625,297],[407.265625,376],[403.265625,485]]],[[[197.265625,113],[197.265625,160],[206.265625,487],[210.265625,487]],[[206.265625,485],[381.265625,479],[273.265625,481],[385.265625,477]],[[381.265625,480],[381.265625,482],[369.265625,317],[368.265625,315]],[[202.265625,321],[302.265625,309],[298.265625,320],[369.265625,315]]],[[[183.0769230769231,100],[300,100],[300,100],[401.53846153846155,100]],[[401.53846153846155,100],[405.265625,161],[383.265625,234],[371.265625,488]],[[185.265625,101],[166.265625,151],[196.265625,235],[207.265625,258]]],[[[203.265625,114],[409.265625,117],[205.265625,114],[405.265625,119]],[[405.265625,120],[414.265625,120],[408.265625,307],[406.265625,466]],[[204.265625,113],[182.265625,360],[196.265625,349],[191.265625,485]],[[411.265625,465],[388.265625,466],[268.265625,491],[191.265625,486]],[[191.265625,296],[302.265625,305],[289.265625,287],[409.265625,281]]],[[[422,483],[434.265625,112],[440,161],[434,114]],[[435.265625,113],[334.265625,111],[260.265625,133],[219.265625,122]],[[223.265625,297],[227.265625,304],[411.265625,295],[431.265625,295]],[[221.265625,123],[207.265625,182],[226.265625,278],[223.265625,298]],[[428.265625,483],[326.265625,478],[316.265625,481],[212.265625,478]]]]; 
}
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