SVG Timer

by B L Praveen

HTML

<div style="padding:20px;">

<svg id="first" width="140" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
    
    <defs>
        <radialGradient id="shadow_1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="50%" stop-color="#444" stop-opacity="1" />
            <stop offset="50%" stop-color="#000" stop-opacity="0.3" />
            <stop offset="55%" stop-color="#000" stop-opacity="0" />
            
            <stop offset="90%" stop-color="#000" stop-opacity="0" />
            <stop offset="100%" stop-color="#000" stop-opacity="0.4" />
        </radialGradient>
    </defs>
    
    
    <circle cx="70" cy="70" r="60" fill="#333" />
    
    <path id="progress_1" d="" fill="#0b0" />
    
    <circle cx="70" cy="70" r="60" fill="url(#shadow_1)" />
    
    <text id="seconds_1" x="70" y="80" text-anchor="middle" fill="#fff" style="font-size:24px; font-family:Arial;">0</text>
    
</svg>


<svg width="140" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
    
    <defs>
        <radialGradient id="shadow_2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="50%" stop-color="#444" stop-opacity="1" />
            <stop offset="50%" stop-color="#000" stop-opacity="0.3" />
            <stop offset="55%" stop-color="#000" stop-opacity="0" />
            
            <stop offset="90%" stop-color="#000" stop-opacity="0" />
            <stop offset="100%" stop-color="#000" stop-opacity="0.4" />
        </radialGradient>
        
        <linearGradient id="G_green" x1="0" y1="0" x2="0" y2="0.9">
            <stop offset="20%" stop-color="#0b0" />
            <stop offset="90%" stop-color="#ff0" />
        </linearGradient>
        
        <linearGradient id="G_red" x1="0" y1="0" x2="0" y2="0.9">
            <stop offset="20%" stop-color="#f00" />
            <stop offset="90%" stop-color="#ff0" />
        </linearGradient>
        
        <radialGradient id="G_yellow" fy="100%" fx="50%" r="100%"...

JavaScript

$(function(){
    var theTimer;
    var theSeconds = 60;
    
    var radius = 60;
    var offset = 10;
    
    var col_H = 120;
    var col_S = 95;
    var col_L = 48;
    
    var miliseconds = null;
    
    function hsl2rgb(H, S, L){
        var R, G, B;
        var t1, t2;
        
        H = H / 360;
        S = S / 100;
        L = L / 100;
        
        if ( S == 0 ) {
            R = G = B = L;
        } else {
            function hue2rgb(t1, t2, t3) {
                if (t3 < 0) t3 += 1;
                if (t3 > 1) t3 -= 1;
                
                if (t3 * 6 < 1) return t2 + (t1 - t2) * 6 * t3;
                if (t3 * 2 < 1) return t1;
                if (t3 * 3 < 2) return t2 + (t1 - t2) * (2 / 3 - t3) * 6;
                
                return t2;
            }
            
            var t1 = (L < 0.5) ? L * (1 + S) : L + S - L * S;
            var t2 = 2 * L - t1;
            
            R = hue2rgb(t1, t2, H + 1/3);
            G = hue2rgb(t1, t2, H);
            B = hue2rgb(t1, t2, H - 1/3);
        }
        
        return [
            Math.round(R * 255), 
            Math.round(G * 255), 
            Math.round(B * 255)
        ];
    }
    
    function drawCoord(radius, degrees) {
        var radians = degrees * Math.PI / 180;
        
        var rX = radius + offset + Math.sin(radians) * radius;
        var rY = radius + offset - Math.cos(radians) * radius;
        
        var dir = (degrees > 180) ? 1 : 0;
        
        var coord = 'M' + (radius + offset) + ',' + (radius + offset) + ' ' + 
                    'L' + (radius + offset) + ',' + offset + ' ' +
                    'A' + radius + ',' + radius + ' 0 ' + dir + ',1 ' +
                    rX + ',' + rY;
        
        return coord;
    }
    
    
    function updateTimer() {
        var date = new Date();
        
        if ( miliseconds == null ) miliseconds = date.getTime();
        
        var diff    = (date.getTime() - miliseconds) % (1000 *...