DEV Community

Cover image for ⌛ Html Css Js SVG Clock 🕐
alexpaper
alexpaper

Posted on

⌛ Html Css Js SVG Clock 🕐

How to create a super simple clock using html, css, svg images and javascript?

Well it is not so complicated if you keep in mind some essential points,
you need to place the svg circle image directly inside the Html page in this way:

<div class="clock-container flex">
  <svg class="svg-seconds" width="24px" height="24px" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
  <svg class="svg-minutes" width="24px" height="24px" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
  <svg class="svg-hours" width="24px" height="24px" viewBox="0 0 24 24"    xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
    
   <div class="time-box">
            <div class="time">00:00:00</div>
   </div>
</div>

Enter fullscreen mode Exit fullscreen mode

and this is all the Html code you really need,

for the Css part it is necessary to give a position relative to the time-box div, so you can position the Svg circles absolutely within it

.time-box{
    position: relative;
...
}

/* SVGS  */
svg.svg-seconds{  
    position: absolute;
    width: 360px;
    height: 360px;
    fill: var(--second);
    stroke: var(--third);
    stroke-width: 0.5;
    stroke-dasharray: 63;
}

svg.svg-minutes{  
    position: absolute;
    width: 330px;
    height: 330px;
    fill: transparent;
    stroke: var(--fourth);
    stroke-width: 0.6;
    stroke-dasharray: 63;
}

svg.svg-hours{  
    position: absolute;
    width: 270px;
    height: 270px;
    fill: transparent;
    stroke: var(--seventh);
    stroke-width: 3;
    stroke-dasharray: 63;
}

Enter fullscreen mode Exit fullscreen mode

for the javascript part instead, you need to create a simple function that change the stroke of the Svg circles and return a time string

// TIME FN
function timeFn (){
    let time = new Date();
    let hours = addZero(time.getHours());
    let minutes = addZero(time.getMinutes());
    let seconds = time.getSeconds().toString().padStart(2,0);
    // 4 SVG OFFSET
    secCircle.style.strokeDashoffset = -(63 - (64 * seconds) / 60);
    minCircle.style.strokeDashoffset = -(63 - (64 * minutes) / 60);
    hoursCircle.style.strokeDashoffset = -(63 - (64 * hours) / 24)
    // FULL TIME
    let fullTime = `${hours}:${minutes}:${seconds}`;
    // console.log(fullTime)
    return fullTime;
}

Enter fullscreen mode Exit fullscreen mode

to add a zero you can use a function

function addZero (timeValue) {
    return Number(timeValue) >= 10 ? timeValue : '0'+ timeValue;
};

Enter fullscreen mode Exit fullscreen mode

or use padStart() methods

.toString().padStart(2,0);

Enter fullscreen mode Exit fullscreen mode

now all that you need to do is set the interval to 1 second (default) and every time change the inner Html of the time div

setInterval(()=> time.innerHTML = timeFn());
Enter fullscreen mode Exit fullscreen mode

you can find the code here github

this is a simple video guide

👋

Top comments (0)