Categories
#SVG JavaScript Web development

SVG Analog Clock (current time)

Learn how to create 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