Draw an Analog Clock using HTML and CSS

In this tutorial, we will be working on “Drawing an Analog Clock” using HTML and CSS.  In this, we will be using SVG ( Scalable Vector Graphics ). SVG can be used to draw shapes like a circle, rectangle, etc.

Why we are using SVG?
It is because SVG images are:

  • scalable.
  • they do not lose the quality even if we zoom or resize the images.
  • through this we can also conclude that these images are zoomable.

Using HTML and CSS to draw an Analog Clock

We directly jump to the code, and after having a look at it, we will try to understand what different sections of code do. The code to draw an Analog Clock from HTML and CSS is shown below.

<html>
<head>
<title>Clock using HTML and CSS</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="clock">
<svg width="110" height="110">
<circle id="face" cx="50" cy="50" r="50" /> 
<line id="hourH" x1="50" y1="50" x2="50" y2="30" />
<line id="minuteH" x1="50" y1="50" x2="50" y2="20" />
<line id="secondH" x1="50" y1="50" x2="50" y2="15" />
<line id="secondT" x1="50" y1="50" x2="50" y2="50" />
<text x="42" y="14">12</text>
<text x="90" y="56">3</text>
<text x="48" y="96">6</text>
<text x="4" y="58">9</text>
</svg>
</div>
</body>
</html>
*{
    margin:0;
    padding:0;
    font-family:sans-serif;
    font-size:11px;
}

.clock{
    width:110px;
    height:110px;
}

#face{
    stroke:black;
    stroke-width:2px;
    fill:white;
}

#hourH, #minuteH, #secondH, #secondT{
    stroke:black;
    stroke-linecap:round;
}

#hourH{
    stroke-width:3px;
}

#minuteH{
    stroke-width:2px;
}

#secondH{
    stroke-width:1px;
}

Through <link type =”text/css”…..> inside the <head> in HTML code, we link our HTML file with the CSS stylesheet made to provide required margin, padding, etc.
Inside the body, we make a div class (clock), and inside it we directly embed SVG, defining its width and height. We also have
<circle id=”face” cx=”50″ cy=”50″ r=”50″ />, which represents a circle, with center at(50,50) or x-coordinate = y-coordinate = 50 and radius also equals to 50. Then we create four lines of form <line id = ……/> representing hour-hand(hourH), minute-hand(minuteH), second-hand(secondH) and second-tail(secondT). x1,y1,x2,y2 provides them proper position and alignment.

After this we create 4 <text> tags to show 3,6,9,12. Here x and y are text coordinates.

Now coming to our CSS code, which is pretty easy to understand. We initialize it with margin=0 and padding = 0, and set the font-family to ‘sans-serif’,
The div class clock created is provided with dimensions of 110px width and 110px height.
Using face id, we provide stroke-width and fill the clock face with white color.
At last we provide hour, min and second hand with different stroke width, so that they are differentiable. We can always play around the assigned values and properties, so as to learn more about them. In this case, our clock will look something like shown below.

Draw an Analog Clock using HTML and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *