Categories
Web development

SVG Analog Clock (current time)



SVG Analog Clock (current time)

To create the SVG Analog Clock (current time) follow the steps below.

Demo:

*to see the SVG Clock Animation on the website click here.

Step1.

Draw the Clock

For this tutorial, I had drawn Clock and Clock face in Adobe Illustrator. To see how to draw the analog clock in Adobe Illustrator click here.

Step2.

Add the HTML and paste your SVG code into it (inside the <body> element in your HTML document):

<!doctype html>
<html>
<head>
<title>SVG Analog Clock</title>
</head>

<body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080">
  
  <style>.cls-1{fill:#79c7c6;}.cls-2{fill:#63a49f;}.cls-3{fill:#94d1d7;}.cls-4{fill:#fff;}.cls-5{font-size:36px;font-family:ArialMT, Arial;}.cls-5,.cls-7{fill:#1d1d1b;}.cls-6{letter-spacing:-0.07em;}</style>
  
  <g id="background"><rect class="cls-1" width="1080" height="1080"/></g>
    
    <g id="clock">
      <polygon id="shadow" class="cls-2" points="333.73 764.21 669.9 1080 1080 1080 1080 604.14 731.96 303.4 333.73 764.21"/><circle class="cls-3" cx="540" cy="540" r="304.67"/><circle class="cls-4" cx="540" cy="540" r="270.08"/>
      
            <text class="cls-5" transform="translate(635.58 342.46)"><tspan xml:space="preserve">  1</tspan></text><text class="cls-5" transform="translate(723.14 430.01)"><tspan xml:space="preserve">  2</tspan></text><text class="cls-5" transform="translate(755.18 549.6)"><tspan xml:space="preserve">  3</tspan></text><text class="cls-5" transform="translate(723.14 669.2)"><tspan xml:space="preserve">  4</tspan></text><text class="cls-5" transform="translate(635.58 756.75)"><tspan xml:space="preserve">  5</tspan></text><text class="cls-5" transform="translate(529.99 797.79)">6</text><text class="cls-5" transform="translate(396.39 756.75)">7</text><text class="cls-5" transform="translate(308.84 669.2)">8</text><text class="cls-5" transform="translate(276.8 549.6)">9</text><text class="cls-5" transform="translate(308.84 430.01)">10</text><text class="cls-5" transform="translate(396.39 342.45)"><tspan class="cls-6">1</tspan>
        <tspan x="17.35" y="0">1</tspan></text><text class="cls-5" transform="translate(515.99 310.41)">12</text></g>
      
       <g id="circle">
      <circle id="middle" class="cls-6" cx="540" cy="540" r="20.18"/>
      <circle id="middle-top" class="cls-4" cx="540" cy="540" r="12.3"/></g>
    </svg>
</body>
</html>

Step3.

Draw the clock hands:

<!doctype html>
<html>
<head>
<title>SVG Analog Clock</title>
    <style>
        #hr {
  stroke-width:15px; 
  stroke: #333; 
  stroke-linecap:round;
}

#min {
	stroke-width: 10px;
  fill: #333; 
  stroke: #333;
  stroke-linecap:round;
}
#sec {
  stroke-width: 5px;
  stroke: #f55;
  stroke-linecap:round;
  transform-origin: bottom;
  transform-box: fill-box;
 }
    </style>
</head>

<body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080">
  
  <style>.cls-1{fill:#79c7c6;}.cls-2{fill:#63a49f;}.cls-3{fill:#94d1d7;}.cls-4{fill:#fff;}.cls-5{font-size:36px;font-family:ArialMT, Arial;}.cls-5,.cls-7{fill:#1d1d1b;}.cls-6{letter-spacing:-0.07em;}</style>
  
  <g id="background"><rect class="cls-1" width="1080" height="1080"/></g>
    
    <g id="clock">
      <polygon id="shadow" class="cls-2" points="333.73 764.21 669.9 1080 1080 1080 1080 604.14 731.96 303.4 333.73 764.21"/><circle class="cls-3" cx="540" cy="540" r="304.67"/><circle class="cls-4" cx="540" cy="540" r="270.08"/>
      
            <text class="cls-5" transform="translate(635.58 342.46)"><tspan xml:space="preserve">  1</tspan></text><text class="cls-5" transform="translate(723.14 430.01)"><tspan xml:space="preserve">  2</tspan></text><text class="cls-5" transform="translate(755.18 549.6)"><tspan xml:space="preserve">  3</tspan></text><text class="cls-5" transform="translate(723.14 669.2)"><tspan xml:space="preserve">  4</tspan></text><text class="cls-5" transform="translate(635.58 756.75)"><tspan xml:space="preserve">  5</tspan></text><text class="cls-5" transform="translate(529.99 797.79)">6</text><text class="cls-5" transform="translate(396.39 756.75)">7</text><text class="cls-5" transform="translate(308.84 669.2)">8</text><text class="cls-5" transform="translate(276.8 549.6)">9</text><text class="cls-5" transform="translate(308.84 430.01)">10</text><text class="cls-5" transform="translate(396.39 342.45)"><tspan class="cls-6">1</tspan>
        <tspan x="17.35" y="0">1</tspan></text><text class="cls-5" transform="translate(515.99 310.41)">12</text></g>
        
        <g transform="translate(270, 270)" id="clock-hands">
         <line x1="270" y1="270" x2="270" y2="110" transform="rotate(80 100 100)" id="hr">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="43200s"
                              repeatCount="indefinite"/>
        </line>
                                                      
        <line x1="270" y1="270" x2="270" y2="75" id="min">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="3600s"
                              repeatCount="indefinite"/>
        </line>
      
        <line x1="270" y1="270" x2="270" y2="40" id="sec">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="60s"
							                      calcMode="discrete"
                              values="0;   6;  12;  18;  24;  30;  36;  42;  48;  54; 60;  66;  72;  78;  84;  90;  96; 102; 108; 114; 120; 126; 132; 138; 144; 150; 156; 162; 168; 174; 180; 186; 192; 198; 204; 210; 216; 222; 228; 234; 240; 246; 252; 258; 264; 270; 276; 282; 288; 294; 300; 306; 312; 318; 324; 330; 336; 342; 348; 354; 0"
                              additive="replace"
                              fill="freeze"
                              repeatCount="indefinite"/>
        </line>
    </g>
      
       <g id="circle">
      <circle id="middle" class="cls-6" cx="540" cy="540" r="20.18"/>
      <circle id="middle-top" class="cls-4" cx="540" cy="540" r="12.3"/></g>
    </svg>
</body>
</html>

Step4.

To set the current time and link the clock hands add JavaScript:

<!doctype html>
<html>
<head>
<title>SVG Analog Clock</title>
    <style>
        #hr {
  stroke-width:15px; 
  stroke: #333; 
  stroke-linecap:round;
}

#min {
	stroke-width: 10px;
  fill: #333; 
  stroke: #333;
  stroke-linecap:round;
}
#sec {
  stroke-width: 5px;
  stroke: #f55;
  stroke-linecap:round;
  transform-origin: bottom;
  transform-box: fill-box;
 }
    </style>
</head>

<body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080">
  
  <style>.cls-1{fill:#79c7c6;}.cls-2{fill:#63a49f;}.cls-3{fill:#94d1d7;}.cls-4{fill:#fff;}.cls-5{font-size:36px;font-family:ArialMT, Arial;}.cls-5,.cls-7{fill:#1d1d1b;}.cls-6{letter-spacing:-0.07em;}</style>
  
  <g id="background"><rect class="cls-1" width="1080" height="1080"/></g>
    
    <g id="clock">
      <polygon id="shadow" class="cls-2" points="333.73 764.21 669.9 1080 1080 1080 1080 604.14 731.96 303.4 333.73 764.21"/><circle class="cls-3" cx="540" cy="540" r="304.67"/><circle class="cls-4" cx="540" cy="540" r="270.08"/>
      
            <text class="cls-5" transform="translate(635.58 342.46)"><tspan xml:space="preserve">  1</tspan></text><text class="cls-5" transform="translate(723.14 430.01)"><tspan xml:space="preserve">  2</tspan></text><text class="cls-5" transform="translate(755.18 549.6)"><tspan xml:space="preserve">  3</tspan></text><text class="cls-5" transform="translate(723.14 669.2)"><tspan xml:space="preserve">  4</tspan></text><text class="cls-5" transform="translate(635.58 756.75)"><tspan xml:space="preserve">  5</tspan></text><text class="cls-5" transform="translate(529.99 797.79)">6</text><text class="cls-5" transform="translate(396.39 756.75)">7</text><text class="cls-5" transform="translate(308.84 669.2)">8</text><text class="cls-5" transform="translate(276.8 549.6)">9</text><text class="cls-5" transform="translate(308.84 430.01)">10</text><text class="cls-5" transform="translate(396.39 342.45)"><tspan class="cls-6">1</tspan>
        <tspan x="17.35" y="0">1</tspan></text><text class="cls-5" transform="translate(515.99 310.41)">12</text></g>
        
        <g transform="translate(270, 270)" id="clock-hands">
         <line x1="270" y1="270" x2="270" y2="110" transform="rotate(80 100 100)" id="hr">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="43200s"
                              repeatCount="indefinite"/>
        </line>
                                                      
        <line x1="270" y1="270" x2="270" y2="75" id="min">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="3600s"
                              repeatCount="indefinite"/>
        </line>
      
        <line x1="270" y1="270" x2="270" y2="40" id="sec">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="60s"
							                calcMode="discrete"
                              values="0;   6;  12;  18;  24;  30;  36;  42;  48;  54;
               60;  66;  72;  78;  84;  90;  96; 102; 108; 114;
              120; 126; 132; 138; 144; 150; 156; 162; 168; 174;
              180; 186; 192; 198; 204; 210; 216; 222; 228; 234;
              240; 246; 252; 258; 264; 270; 276; 282; 288; 294;
              300; 306; 312; 318; 324; 330; 336; 342; 348; 354; 0"
                              additive="replace"
                              fill="freeze"
                              repeatCount="indefinite"/>
        </line>
    </g>
      
       <g id="circle">
      <circle id="middle" class="cls-6" cx="540" cy="540" r="20.18"/>
      <circle id="middle-top" class="cls-4" cx="540" cy="540" r="12.3"/></g>
    </svg>
    <script>
        let clockHands = [];
clockHands[clockHands.length] = document.querySelector("#min > *");
clockHands[clockHands.length] = document.querySelector("#hr > *");

let cy = 270;
let cx = 270;

function link(idx) {
  return [idx, cx, cy].toString();
}

let date = new Date();
let hrHand = 360 * date.getHours() / 12 + date.getMinutes() / 2;
let minHand = 360 * date.getMinutes() / 60;

clockHands[0].setAttribute('from', link(minHand));
clockHands[0].setAttribute('to', link(minHand + 360));
clockHands[1].setAttribute('from', link(hrHand));
clockHands[1].setAttribute('to', link(hrHand + 360));
    </script>
</body>
</html>

Enjoy coding!

Hey, here’s something that might interest you:

SVG Handwriting Animation

Baggage Scan /SVG & JavaScript Animation

CSS Moon orbiting the Earth on the SVG path

Categories
Adobe Illustrator

How to draw a clock in Adobe Illustrator?



clock adobe illustrator

To learn how to create Analog Clock in Adobe Illustrator follow the steps below and watch the video tutorial.

Step1.

Create a new document in square shape:

How to draw a clock in Adobe Illustrator?

Step2.

Set the background

Select the Rectangle Tool (M) and draw a rectangle the same size as your artboard/ document. Fill the square (colour used in the tutorial: #79c7cb).

Adobe Illustrator Analog Clock

In the Layer Panel change the name of the layer to “background” and lock the layer.

How to create the analog clock in Adobe Illustrator?

Step3.

Draw a clock

Create a new layer. Select the Ellipse Tool (L) and draw the circle in the middle of your artboard. Fill the circle (colour used in the tutorial: #94d1d7). Remove the stroke.

Draw Clock in Adobe Illustrator
Adobe Illustrator Remove the stroke

Tip: To align the circle to the centre of the artboard use the Selection Tool (V). Select the whole square and use align features (horizontal align center and vertical-align center). To open the Align Panel go to Window->Align.

align items adobe illustrator

Step4 (optional).

Draw a shadow

Use the Pen Tool (P) and draw the shape below. Fill the shape (colour used in the tutorial: #63a49f).

Reorder the paths:

Draw a clock in Adobe Illustrator

Step5.

Create the clock face

Create a new layer. Select the Ellipse Tool (L) and draw the circle in the middle of your artboard. Fill the circle (colour used in the tutorial: #ffffff). Align the circle to the centre. Lock the layer.

Draw a clock face in Adobe Illustrator

Add number:

Create a new layer. In the place of number 12 on the clock face (align number to horizontal centre) type XX. Select the font and font size of your number (font used in the tutorial: Arial Rounded MT Bold, 36px).

draw a clock face in adobe illustrator

Go to Window->Symbols. Select the text and click on the New Symbol button in the Symbols panel.

Create a clock-face in Adobe Illustrator

Use the Pen Tool (P) to make a null point in the centre (hit ESC to make only one point). Select symbol and the null point. Go to Object and group them together.

clock face adobe illustrator

Go to Effect > Distort &Transform > Transform…

draw a clock face in Illustrator

Set the angle to 30°, enter 11 copies and set the registration point to the bottom:

Go to Object > Expand Appearance and then select Ungroup twice. Delete the null points.

analog clock face adobe illustrator

Select all symbols. Right-click and choose Reset Transformation.

Create a clock face in Adobe Illustrator
clock face Adobe Illustrator

Right-click and select Break Link to Symbol. Ungroup and type the numbers.

clock adobe illustrator

Watch also the video tutorial:

Enjoy!

Read also:

How to draw a paper plane in Adobe Illustrator?

How to draw Easter eggs in Adobe Illustrator?

Categories
CSS HTML Web development

HTML & CSS Clock Animation

HTML & CSS Clock Animation

To learn how to create the CSS Clock Animation follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Clock Animation on the website click here.

Step1.

Add HTML

<div class="clock">
  <div class="face"></div>
  <div class="hr"></div>
  <div class="hrTwo"></div>
  <div class="hands"></div>
  <div class="seconds"></div>
  <div class="parts"></div>
  <div class="top"></div>
  <div class="bell"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock {
  position: relative;
  width: 350px;
  height: 350px;
  background-color: #94d2bd;
  overflow: hidden;
}

Style the clock:

.face {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 20px solid #bb3e03;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:5;
}

.face:before, .face:after {
  content:"";
  position: absolute;
  background-color: #001219;
  border-radius:3px;
}

.face:before {
  width: 10px;
  height:20px;
  left: 50%;
  transform: translate(-50%,-50%);
  top:15px;
  box-shadow: 0 150px #001219;
}

.face:after {
  width: 20px;
  height:10px;
  top: 50%;
  transform: translate(-50%,-50%);
  left:15px;
  box-shadow: 150px 0 #001219;
}

.hr, .hrTwo {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:5;
}

.hr:before, .hr:after, .hrTwo:before, .hrTwo:after {
  content:"";
  position: absolute;
  background-color: #ced4da;
  border-radius:3px;
  width: 5px;
  height:20px;
}

.hr:before {
  left: 70%;
  transform: translate(-50%,-50%);
  top:16px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(30deg);
}

.hr:after {
  left: 85%;
  transform: translate(-50%,-50%);
  top:41px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(60deg);
}

.hrTwo:before {
  left: 28%;
  transform: translate(-50%,-50%);
  top:14px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(-30deg);
}

.hrTwo:after {
  left: 13%;
  transform: translate(-50%,-50%);
  top:39px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(-60deg);
}

.hands {
  position: absolute;
  z-index:7;
  width: 45px;
  height: 8px;
  background-color: #001219;
  left:130px;
  top:171px;
  border-radius: 5px 0 0 5px;
}

.hands:before {
  position: absolute;
  content:"";
  background-color: #001219;
  width: 60px;
  height: 7px;
  left:40px;
  top:13.5px;
  transform: rotate(25deg);
  border-radius: 0 5px 5px 0;
}

.seconds {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:9;
}

.seconds:before {
  content:"";
  position: absolute;
  background-color: #ae2012;
  width:4px;
  height: 75px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transform-origin: top;
}

.seconds:after {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: #ced4da;
  width: 17px;
  height: 17px;
  border: 5px solid #adb5bd;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.parts {
  position: absolute;
  z-index:2;
  background-color: #001219;
  width: 10px;
  height: 30px;
  left:170px;
  top:40px;
}

.parts:before, .parts:after {
  content:"";
  position: absolute;
  background-color: #001219;
  width: 15px;
  height: 35px;
  border-radius: 0 0 10px 10px;
  top:215px;
}

.parts:before {
  left:-60px;
  transform: rotate(20deg);
}

.parts:after {
  left: 60px;
  transform: rotate(-20deg);
}

.top {
  position: absolute;
  background-color: #bb3e03;
  width: 25px;
  height: 10px;
  border-radius:3px;
  top:40px;
  left:162px;
  z-index:3;
}

.top:before, .top:after {
  content:"";
  position: absolute;
  background-color: #001219;
  width: 12px;
  height: 55px;
  border-radius: 10px 10px 0 0;
  top:-10px;
}

.top:before {
  left:-45px;
  transform: rotate(-25deg);
}

.top:after {
  left:55px;
  transform: rotate(25deg);
}

.bell {
  position: absolute;
  z-index:4;
}

.bell:before, .bell:after {
  content:"";
  position: absolute;
  background-color: #bb3e03;
  width: 60px;
  height: 25px;
  border-radius: 20px 20px 0 0;
  top:-178px;
}

.bell:before {
  left:91px;
  transform: rotate(-25deg);
}

.bell:after {
  left:196px;
  transform: rotate(25deg);
}
Pure CSS Clock Animation

Animate the second hand using the CSS steps() Function:

Add on the end of the .seconds:before the following properties:

animation: sec 60s infinite;
animation-timing-function: steps(60,end);

and @keyframes:

@keyframes sec {
  from {transform: rotate(0);}
  to {transform: rotate(360deg);}
}

Add the shadow:

.clock:before, .clock:after {
  content:"";
  position: absolute;
  
}

.clock:before {
  width:280px;
  height: 305px;
  top:60px;
  left: 75px;
  transform: skew(40deg, -13.5deg);
  background-color: #6f9487;
}

.clock:after {
  background-color: #94d2bd;
  width:300px;
  height:300px;
  transform: rotate(-65deg) skew(-5deg);
  left:-110px;
  top:-65px;
}

.shadow {
  position: absolute;  
}

.shadow:before, .shadow:after {
  content:"";
  position: absolute;
  height: 0;
  z-index:1;
  border-right: 45px solid transparent;
  top:-170px;
}

.shadow:before {
  border-bottom: 50px solid #6f9487;
  left:177px;
  width:10px;
}

.shadow:after {
  border-bottom: 50px solid #6f9487;
  left:130px;
  width:20px;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS & JavaScript Digital Clock

What time is it? – CSS Analog Clock Animation

Countdown Timer

Categories
CSS JavaScript Web development

What time is it? – CSS Analog Clock Animation

css analog clock

Demo:

*to see the CSS Analog Clock on the website click here.

What do we need to do?

First, you need to have a clock face image (you can use this one below), and then follow three steps:

Clock Face
  1. Add HTML
  2. Add CSS
  3. Add JavaScript (set the current time)

Step 1.

We need to create a clock face with hours, minutes, and seconds:

 <div class="clock">
  <div class="hour">
   <div class="hr" id="hr"></div>
  </div>
  <div class="minutes">
   <div class="min" id="min"></div>
  </div>
  <div class="seconds">
   <div class="sec" id="sec"></div>
  </div>
</div>

Step 2.

Add CSS

Set the colour and the position of the background and elements:

body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #008080;        
}

Style the clock:

.clock {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 350px;
 height: 350px;
 background: #8c2f39 url(https://lenadesignorg.files.wordpress.com/2020/01/clock-2.png?w=344);
 border-radius: 50%;
 border: 20px solid #b23a48; 
}

.clock:before {
 content: '';
 position: absolute;
 width: 15px;
 height: 15px;
 background-color: #333;
 border: 2px solid #8c2f39;
 border-radius: 50%;
 z-index:10;
}

.hour, .minutes, .seconds {
 position: absolute;
}

.hour, .hr {
 width: 160px;
 height: 160px;
}

.minutes, .min {
 width: 190px;
 height: 190px;
}

.seconds, .sec {
 width: 230px;
 height: 230px;
}

.hr,.min,.sec {
 display: flex;
 justify-content: center;
 position: absolute;
 border-radius: 50%;
}

.hr:before {
 content: '';
 position: absolute;
 width: 8px;
 height: 80px;
 background: #848484;
 border-radius: 6px 6px 0 0;
}

.min:before {
 content: '';
 position: absolute;
 width: 4px;
 height: 90px;
 background-color: #d6d6d6;
 border-radius: 6px 6px 0 0;
}

.sec:before {
 content: '';
 position: absolute;
 width: 2px;
 height: 150px;
 background-color: red;
 border-radius: 6px 6px 0 0;
}

Step 3.

Add JavaScript

Set the current time.

 const deg = 6;
 const hr = document.querySelector("#hr");
 const mn = document.querySelector("#min");
 const sc = document.querySelector("#sec");
 setInterval(() => {
  let day = new Date();
  let hh = day.getHours() * 30;
  let mm = day.getMinutes() * deg;
  let ss = day.getSeconds() * deg;
  hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
  mn.style.transform = `rotateZ(${mm}deg)`;
  sc.style.transform = `rotateZ(${ss}deg)`;
 })


function initLocalClocks() {
  // Get the local time using JS
  var date = new Date;
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();
  var hands = [
    {
      hand: 'hr',
      angle: (hr * 30) + (min / 2)
    },
    {
      hand: 'mn',
      angle: (mn * 6)
    },
    {
      hand: 'sc',
      angle: (sc * 6)
    }
  ];
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
        elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
        // If this is a minute hand, note the seconds position (to calculate minute position later)
        if (hands[j].hand === 'mn') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

To see the CSS Analog Clock on the website visit: lenastanley.com

Enjoy coding!

Read also:

CSS & JavaScript Digital Clock

JavaScript – Time and date

HTML5 Canvas Analog Clock