clock animation Archives

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

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);
}

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!