How to Build a Clock with JavaScript and SVG

JavaScript is a programming language that lets you create complex web page features. On the other hand, Scalable Vector Graphics (SVG) is a two-dimensional vector image format based on the Extensible Markup Language (XML). It supports interactivity and animation. Therefore, building a clock using SVG (Scalar Vector Graphics) and JavaScript is quite simple.

Introduction to JavaScript.
What is SVG.
Benefits of SVG.
How to implement JavaScript with SVG on the web.
Resources.
Conclusion.

Prerequisites

Basic understanding of JavaScript.
Integrated Development Environment (eg. Visual studio code).

Introduction to JavaScript

JavaScript is a programming language that lets you create complex applications. It can also be used to create web games with dynamic styling, animation, and other features such as when buttons are pressed or data is entered on forms.

JavaScript is a powerful scripting language. On top of the core JavaScript language, developers have written numerous tools that unlock a vast amount of functionality with minimal effort.

Some of these tools include:

Third-party frameworks and libraries that can be used with HTML to speed up the development of applications.
Third-party APIs allow developers to integrate features from other content providers such as Twitter or Facebook, into their websites.
Browser Application Programming Interfaces (APIs) are functions built into web browsers that allow you to access different features.

What is SVG

SVG is an abbreviation for Scalable Vector Graphics. This is an XML format that specifies vector-based graphics.

SVG types

SVG in HTML

<!DOCTYPE html>
<html>
  <body>
    <h1>My first SVG</h1>

    <svg width="100" height="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="green"
        stroke-width="4"
        fill="yellow"
      />
    </svg>
  </body>
</html>

SVG Rectangle

  <svg width="400" height="110">
      <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  </svg>

SVG Circle

  <svg height="100" width="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>

SVG Ellipse

  <svg height="140" width="500">
      <ellipse cx="200" cy="80" rx="100" ry="50"
      style="fill:yellow;stroke:purple;stroke-width:2" />
  </svg>

SVG Line

  <svg height="210" width="500">
      <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  </svg>

SVG Polygon

  <svg height="210" width="500">
      <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
  </svg>

SVG Polyline

  <svg height="200" width="500">
      <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
      style="fill:none;stroke:black;stroke-width:3" />
  </svg>

SVG Path

  <svg height="210" width="400">
      <path d="M150 0 L75 200 L225 200 Z" />
  </svg>

SVG Text

  <svg height="30" width="200">
      <text x="0" y="15" fill="red">I love SVG!</text>
  </svg>

SVG Stroking

<svg height="80" width="300">
  <g fill="none">
  <path stroke="red" d="M5 20 l215 0" />
  <path stroke="black" d="M5 40 l215 0" />
  <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

SVG Blur Effects

      <svg height="110" width="110">
          <defs>
              <filter id="f1" x="0" y="0">
              <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
              </filter>
          </defs>
          <rect width="90" height="90" stroke="green" stroke-width="3"
          fill="yellow" filter="url(#f1)" />
      </svg>

SVG Drop Shadows

      <svg height="120" width="120">
          <defs>
              <filter id="f1" x="0" y="0" width="200%" height="200%">
                  <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                  <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
              </filter>
          </defs>
          <rect width="90" height="90" stroke="green" stroke-width="3"
      fill="yellow" filter="url(#f1)" />
      </svg>

SVG Linear

      <svg height="150" width="400">
          <defs>
              <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
              <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
              </linearGradient>
          </defs>
          <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
      </svg>

SVG Radial

  <svg height="150" width="500">
      <defs>
          <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(255,255,255);
          stop-opacity:0" />
          <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
          </radialGradient>
      </defs>
      <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  </svg>

Benefits of SVG

The following are some of the benefits of using SVG over other image formats (such as JPEG and GIF):

Any text editor can be used to generate and edit SVG files.
Photos in SVG format can be found, indexed, scripted, and compressed.
SVG images can be scaled to any size.
SVG images can be printed in high resolution at any scale.
Images in SVG can be zoomed in and out.
When SVG graphics are zoomed or resized, they do not lose quality.
SVG is free.
SVG files are made up entirely of XML.

How to implement JavaScript with SVG on the web

Now, using JavaScript and one of the SVG examples from above, let's create a simple webpage to develop a clock on the web.

Step 1 - Open your Integrated Development Environment (IDE).

To open visual studio code, navigate to any Directory of your choice on your pc, in the terminal, type:

code.

Note: code . won't work if you don't have visual studio code installed on your system

Step 2 - Generating files

Create index.html, style.css, and script.js, by typing the following command:

Windows power shell

    ni index.html,style.css,script.js

Linux
```
touch index.html,style.css,script.js
```

Step 3 - Add basic HTML code snippets to index.html

Inside the index.html we need to setup a basic html page with the following snippet:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>How to Build a Clock with JavaScript and SVG</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <main class="main">
      <!-- clockbox -->
    </main>
  </body>
</html>

Step 4 - Reference the style.css and script.js files

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>How to Build a Clock with JavaScript and SVG</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <--css reference--!>
  </head>
  <body>
    <main class="main">
      <!-- clockbox -->
    </main>

    <script src="script.js"></script> <--js reference--!>
  </body>
</html>

Yes, we're ready to begin; I hope you're following along. 😊

Step 6 - Add SVG to index.html

Since we're building a clock, we'll need the svg circle and svg path for the arm, as shown below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>How to Build a Clock with JavaScript and SVG</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
  </head>
  <body>
    <h1>How to Build a Clock with JavaScript and SVG</h1>
    <main class="main">
      <div class="clockbox">
        <svg
          id="clock"
          xmlns="http://www.w3.org/2000/svg"
          width="300"
          height="200"
          viewBox="0 0 600 600"
        >
          <g id="face">
            <circle class="circle" cx="300" cy="300" r="253.9" />
            <path
              class="hour-marks"
              d="M300.5 94V61M506 300.5h32M300.5 506v33M94 300.5H60M411.3 107.8l7.9-13.8M493 190.2l13-7.4M492.1 411.4l16.5 9.5M411 492.3l8.9 15.3M189 492.3l-9.2 15.9M107.7 411L93 419.5M107.5 189.3l-17.1-9.9M188.1 108.2l-9-15.6"
            />
            <circle class="mid-circle" cx="300" cy="300" r="16.2" />
          </g>
          <g id="hour">
            <path class="hour-arm" d="M300.5 298V142" />
            <circle class="sizing-box" cx="300" cy="300" r="253.9" />
          </g>
          <g id="minute">
            <path class="minute-arm" d="M300.5 298V67" />
            <circle class="sizing-box" cx="300" cy="300" r="253.9" />
          </g>
          <g id="second">
            <path class="second-arm" d="M300.5 350V55" />
            <circle class="sizing-box" cx="300" cy="300" r="253.9" />
          </g>
        </svg>
      </div>
      <!-- .clockbox -->
    </main>

    <script src="script.js"></script>
  </body>
</html>

Have you noticed that all tags now have an id and a class? We'll use these ids as a reference point for our design and JavaScript.

Step 7 - Implementing the JavaScript code for the clock

It's time to start writing some JavaScript code. The JavaScript code and time configurations, the core functionalities of this web application are shown and explained below.

// Declare and Initialize your variables and make references to the id defined in the html file, as needed.
const HOURHAND = document.querySelector("#hour");
const MINUTEHAND = document.querySelector("#minute");
const SECONDHAND = document.querySelector("#second");

// Declare and Initialize the inbuilt date function
const date = new Date();

//
let hr = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();

// Log to see the output in the console
console.log("Hour: " + hr + " Minute: " + min + " Second: " + sec);

Step 8 - Implementing positions

Now let's implement the positions for (hr, min sec) since we can now see the output in the console.

// Declare and Initialize your variables and create positions for each.
let hrPosition = (hr * 360) / 12 + (min * (360 / 60)) / 12;
let minPosition = (min * 360) / 60 + (sec * (360 / 60)) / 60;
let secPosition = (sec * 360) / 60;

// Create a function that actually run the clock
const runClock = () => {
  // Set each position when the function is called
  hrPosition = hrPosition + 3 / 360;
  minPosition = minPosition + 6 / 60;
  secPosition = secPosition + 6;

  // Set the transformation for each arm
  HOURHAND.style.transform = "rotate(" + hrPosition + "deg)";
  MINUTEHAND.style.transform = "rotate(" + minPosition + "deg)";
  SECONDHAND.style.transform = "rotate(" + secPosition + "deg)";
};

// Use the inbuilt setInterval function to invoke the method we created earlier
setInterval(runClock, 1000);

Step 9 - Adding styles in style.css

We are almost done 😊.

Lets's head to style.css to finish the remaining task.

body {
  color: black;
  background-color: rgb(94, 241, 119);
}

h1 {
  position: flex;
  text-align: center;
  font-style: normal;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

footer {
  text-align: center;
}

/* Layout */
.main {
  display: flex;
  padding: 1em;
  height: 80vh;
  justify-content: center;
  align-items: middle;
}

.clockbox,
#clock {
  width: 100%;
  height: 100%;
}

/* Clock styles */
.circle {
  fill: none;
  stroke: #000;
  stroke-width: 9;
  stroke-miterlimit: 10;
}

.mid-circle {
  fill: #000;
}

.hour-marks {
  fill: none;
  stroke: #000;
  stroke-width: 9;
  stroke-miterlimit: 10;
}

.hour-arm {
  fill: none;
  stroke: #000;
  stroke-width: 17;
  stroke-miterlimit: 10;
}

.minute-arm {
  fill: none;
  stroke: #000;
  stroke-width: 11;
  stroke-miterlimit: 10;
}

.second-arm {
  fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

/* Transparent box ensuring arms center properly. */
.sizing-box {
  fill: none;
}

/* Make all arms rotate around the same center point. */
/* Optional: Use transition for animation. */
#hour,
#minute,
#second {
  transform-origin: 300px 300px;
  transition: transform 0.5s ease-in-out;
}

Step 10 - Testing the application

To see the magic, start your live server or preview the application in your browser as shown below.

Congratulations 🎉🎉

Kindly find the link to CodePen below:

https://codepen.io/olanetsoft/pen/PoWxWwq

Thank you Sandeep Panda for the CodePen suggestion.

Thank you Hashnode and the team for making the CodePen Integration seamless.

Resources

Conclusion

You learned about JavaScript, what SVG is, the benefits of SVG, and how to use JavaScript with SVG on the web in this post. Some SVG types were also highlighted, as well as how to use them on the web.

Happy coding!

You can reach out to me on Twitter

How to Build a Clock with JavaScript and SVG

Comments (5)

Tutorials

How to implement API Rate Limiter in NodeJS

More from this blog

Building Your First Token: A Solidity Speedrun

Depth Over Trend

How to Set Up Cross-Chain Messaging Between EVM and Cosmos

How Merkle Proofs Work

Celebrating One Year Working on Axelar: Building the Interoperability Future

Table of Contents

Prerequisites

Introduction to JavaScript

What is SVG

SVG types

Benefits of SVG

How to implement JavaScript with SVG on the web

Step 1 - Open your Integrated Development Environment (IDE).

Step 2 - Generating files

Step 3 - Add basic HTML code snippets to index.html

Step 4 - Reference the style.css and script.js files

Step 6 - Add SVG to index.html

Step 7 - Implementing the JavaScript code for the clock

Step 8 - Implementing positions

Step 9 - Adding styles in style.css

Step 10 - Testing the application

Resources

Conclusion

Command Palette

Comments (5)

Tutorials

How to implement API Rate Limiter in NodeJS

More from this blog

Table of Contents

Prerequisites

Introduction to JavaScript

What is SVG

SVG types

Benefits of SVG

How to implement JavaScript with SVG on the web

Step 1 - Open your Integrated Development Environment (IDE).

Step 2 - Generating files

Step 3 - Add basic HTML code snippets to index.html

Step 4 - Reference the style.css and script.js files

Step 6 - Add SVG to index.html

Step 7 - Implementing the JavaScript code for the clock

Step 8 - Implementing positions

Step 9 - Adding styles in style.css

Step 10 - Testing the application

Resources

Conclusion