Home Web Development JavaScript JavaScript SVG Analog Clock With Minimal Design | Realtime Clock

JavaScript SVG Analog Clock With Minimal Design | Realtime Clock

December 23, 2019

3760

How we can create an analog clock with SVG shapes using JavaScript? Solution: See this JavaScript SVG Analog Clock With Minimal Design, Realtime Clock Program.

Previously I have shared a similar clock program with HTML div blocks, but this is with SVG shapes. Basically, A clock or watch is called “analog” when it has moving hands and (usually) hours marked from 1 to 12 to show you the time. And we can create this type of clock simply using HTML, CSS, and JavaScript.

Today you will learn to create a realtime analog clock with SVG shapes and JS programming. Basically, there are 12 marks for showing times 1 to 12 and 3 handles for showing minutes, hours, and second. As usually, the hour handle is small, and minute handle in bigger than that, and the second handle larger overall.

So, Today I am sharing JavaScript SVG Analog Clock With Minimal Design. There I have used SVG shapes to create the design, CSS for styling, and JavaScript for functioning. There are no jQuery or any other kind of library, the program is created using pure HTML, CSS, JavaScript. That will be good practice for beginners, you can use this on your program.

If you are thinking now how this SVG clock actually is, then see the preview given below.

Preview Of Realtime Clock JS

See this video preview to getting an idea of how this clock looks like.

https://webdevtrick.com/wp-content/uploads/js-analog-clock.mp4?_=1

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this then get the source code of its.

JavaScript SVG Analog Clock Source Code

Before sharing source code, let’s talk about it. First I have created the design using SVG <line> and <circle> elements in the HTML file. Inside the elements, I have placed ID and class names for styling and functioning. In the HTML file, I have linked other files like CSS and JavaScript.

Now using CSS I have placed the clock in the center, as you can see in the preview. I have placed SVG shapes in a circular layout using CSS transform: rotate() command. For the moving handle animation, I have used transition command. Also, I have used CSS variables to store color and placing in items.

JavaScript handling here the real-time management program. First JS detecting the time from your device and gave the position to clock handles according to the time. Now the program updating the time by refreshing the function every second. After that, JavaScript changing CSS values and rotating the minute, hour, second handles according to the time.

Left all other things you will understand after getting the codes, I can’t explain all in the writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>JavaScript SVG Clock | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>

<svg class="clock" viewBox="0 0 100 100">
        <g class="lines">
            <line class="line line-1" x1="50" y1="5" x2="50" y2="10"></line>
            <line class="line line-2" x1="50" y1="5" x2="50" y2="10"></line>
            <line class="line line-3" x1="50" y1="5" x2="50" y2="10"></line>
            <line class="line line-4" x1="50" y1="5" x2="50" y2="10"></line>
            <line class="line line-5" x1="50" y1="5" x2="50" y2="10"></line>
            <line class="line line-6" x1="50" y1="5" x2="50" y2="10"></line>
            <line class="line line-7" x1="50" y1="5" x2="50" y2="10"></line>
            <line class="line line-8" x1="50" y1="5" x2="50" y2="10"></line>
            <line class="line line-9" x1="50" y1="5" x2="50" y2="10"></line>
            <line class="line line-10" x1="50" y1="5" x2="50" y2="10"></line>
            <line class="line line-11" x1="50" y1="5" x2="50" y2="10"></line>
            <line class="line line-12" x1="50" y1="5" x2="50" y2="10"></line>
        </g>

        <line class="line line-hour" x1="50" y1="25" x2="50" y2="50"></line>
        <line class="line line-minute" x1="50" y1="10" x2="50" y2="50"></line>
        <circle cx="50" cy="50" r="3"></circle>

        <g class="line line-second">
            <line x1="50" y1="10" x2="50" y2="60"></line>
            <circle cx="50" cy="50" r="1.5"></circle>
        </g>
  </svg>

  <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript SVG Clock | Webdevtrick.com</title>

</head>

<body>

</g>

</g>

</svg>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
:root {
  --color-primary: #3F3F3F;
  --color-accent: #ff3636;
  --color-background: #FFF;
}

* {
  -webkit-transform-origin: inherit;
          transform-origin: inherit;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: var(--color-background);
}

.clock {
  width: 60vmin;
  height: 60vmin;
  color: var(--color-primary);
  fill: currentColor;
  -webkit-transform-origin: 50px 50px;
          transform-origin: 50px 50px;
  -webkit-animation-name: fade-in;
          animation-name: fade-in;
  -webkit-animation-duration: 500ms;
          animation-duration: 500ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.clock line {
  stroke: currentColor;
  stroke-linecap: round;
}

.lines {
  opacity: 0.5;
  stroke-width: 0.5px;
}

.line-1 {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.line-2 {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}

.line-3 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.line-4 {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}

.line-5 {
  -webkit-transform: rotate(150deg);
          transform: rotate(150deg);
}

.line-6 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.line-7 {
  -webkit-transform: rotate(210deg);
          transform: rotate(210deg);
}

.line-8 {
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg);
}

.line-9 {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

.line-10 {
  -webkit-transform: rotate(300deg);
          transform: rotate(300deg);
}

.line-11 {
  -webkit-transform: rotate(330deg);
          transform: rotate(330deg);
}

.line-12 {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

.line {
  stroke-width: 1.5px;
  transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.line-second {
  color: var(--color-accent);
  stroke-width: 1px;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

/* Code By Webdevtrick ( https://webdevtrick.com ) */

:root {

--color-primary: #3F3F3F;

--color-accent: #ff3636;

--color-background: #FFF;

}

* {

-webkit-transform-origin: inherit;

transform-origin: inherit;

}

body {

display: flex;

align-items: center;

justify-content: center;

min-height: 100vh;

margin: 0;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

background-color: var(--color-background);

}

.clock {

width: 60vmin;

height: 60vmin;

color: var(--color-primary);

fill: currentColor;

-webkit-transform-origin: 50px 50px;

transform-origin: 50px 50px;

-webkit-animation-name: fade-in;

animation-name: fade-in;

-webkit-animation-duration: 500ms;

animation-duration: 500ms;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.clock line {

stroke: currentColor;

stroke-linecap: round;

}

.lines {

opacity: 0.5;

stroke-width: 0.5px;

}

.line-1 {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

.line-2 {

-webkit-transform: rotate(60deg);

transform: rotate(60deg);

}

.line-3 {

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.line-4 {

-webkit-transform: rotate(120deg);

transform: rotate(120deg);

}

.line-5 {

-webkit-transform: rotate(150deg);

transform: rotate(150deg);

}

.line-6 {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.line-7 {

-webkit-transform: rotate(210deg);

transform: rotate(210deg);

}

.line-8 {

-webkit-transform: rotate(240deg);

transform: rotate(240deg);

}

.line-9 {

-webkit-transform: rotate(270deg);

transform: rotate(270deg);

}

.line-10 {

-webkit-transform: rotate(300deg);

transform: rotate(300deg);

}

.line-11 {

-webkit-transform: rotate(330deg);

transform: rotate(330deg);

}

.line-12 {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

.line {

stroke-width: 1.5px;

transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.line-second {

color: var(--color-accent);

stroke-width: 1px;

}

@-webkit-keyframes fade-in {

from {

opacity: 0;

}

to {

opacity: 1;

}

@keyframes fade-in {

from {

opacity: 0;

}

to {

opacity: 1;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
(() => { 

  const secondline = document.querySelector('.line-second');
  const minuteline = document.querySelector('.line-minute');
  const hourline = document.querySelector('.line-hour');

  let rotations = [0, 0, 0] // [second, minutes, hours]
  
  function setTime() {
    const now = new Date();

    const seconds = now.getSeconds();
    const minutes = now.getMinutes();
    const hours = now.getHours() % 12;

    if (seconds === 0) {
      rotations[0]++;
    }

    if (minutes === 0 && seconds === 0) {
      rotations[1]++;
    }

    if (hours === 0 && minutes === 0 && seconds === 0) {
      rotations[2]++;
    }

    const secondsDeg = (seconds / 60 * 360) + (rotations[0] * 360);
    const minutesDeg = (minutes / 60 * 360) + (rotations[1] * 360);
    const hoursDeg = (hours / 12 * 360) + (minutes / 60 * 30) + (rotations[2] * 360);

    secondline.style.transform = `rotate(${secondsDeg}deg)`;
    minuteline.style.transform = `rotate(${minutesDeg}deg)`;
    hourline.style.transform = `rotate(${hoursDeg}deg)`;
  }

  setTime();
  setInterval(setTime, 1000);
})();

// Code By Webdevtrick ( https://webdevtrick.com )

(() => {

const secondline = document.querySelector('.line-second');

const minuteline = document.querySelector('.line-minute');

const hourline = document.querySelector('.line-hour');

let rotations = [0, 0, 0] // [second, minutes, hours]

function setTime() {

const now = new Date();

const seconds = now.getSeconds();

const minutes = now.getMinutes();

const hours = now.getHours() % 12;

if (seconds === 0) {

rotations[0]++;

}

if (minutes === 0 && seconds === 0) {

rotations[1]++;

}

if (hours === 0 && minutes === 0 && seconds === 0) {

rotations[2]++;

}

const secondsDeg = (seconds / 60 * 360) + (rotations[0] * 360);

const minutesDeg = (minutes / 60 * 360) + (rotations[1] * 360);

const hoursDeg = (hours / 12 * 360) + (minutes / 60 * 30) + (rotations[2] * 360);

secondline.style.transform = `rotate(${secondsDeg}deg)`;

minuteline.style.transform = `rotate(${minutesDeg}deg)`;

hourline.style.transform = `rotate(${hoursDeg}deg)`;

}

setTime();

setInterval(setTime, 1000);

})();

That’s It. Now you have successfully created JavaScript SVG Analog Clock With Minimal Design, Realtime Clock Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.