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>
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;
}
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;
}
to add a zero you can use a function
function addZero (timeValue) {
return Number(timeValue) >= 10 ? timeValue : '0'+ timeValue;
};
or use padStart() methods
.toString().padStart(2,0);
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());
you can find the code here github
this is a simple video guide
👋
Top comments (0)