SVG + JavaScript tutorial: How to Code an Animated Watch

Introduction

In this tutorial, you will learn how to create an animated watch using SVG (Scalable Vector Graphics) and JavaScript. This project showcases the power of SVG for rendering graphics inline within HTML, allowing for easy manipulation and animation through JavaScript. By the end of this guide, you'll have a functional watch with animated hands and an interactive calendar window.

Step 1: Setting Up the SVG Tag

• Begin by creating an SVG element in your HTML file to serve as the canvas for your watch.
• Use the following code to define the SVG tag:

  <svg width="200" height="200">
      <!-- SVG content will go here -->
  </svg>
  

• Ensure your SVG dimensions are appropriate for the watch design you aim to create.

Step 2: Drawing Minute Markers

• Use the stroke-dasharray property to create minute markers around the watch face.
• Draw circles or lines for each minute marker by positioning them evenly around the center of the watch.
• Example code for minute markers:

  <line x1="100" y1="10" x2="100" y2="20" stroke="black" />
  

• Adjust the x1, y1, x2, and y2 attributes to position the markers correctly.

Step 3: Drawing Hour Hands

• Create hour hands similar to the minute markers but make them longer and thicker for visibility.
• Use the following code structure to define the hour hand:

  <line id="hour-hand" x1="100" y1="100" x2="100" y2="60" stroke="black" stroke-width="4" />
  

• Position it at the center of the watch, ensuring it rotates correctly.

Step 4: Animating the Hands with JavaScript

• Write JavaScript code to rotate the hour and minute hands based on the current time.
• Use the following example to animate the minute hand:

  const minuteHand = document.getElementById('minute-hand');
  const rotateMinuteHand = () => {
      const now = new Date();
      const minutes = now.getMinutes();
      const rotation = minutes * 6; // 360 degrees / 60 minutes
      minuteHand.style.transform = `rotate(${rotation}deg)`;
  };
  setInterval(rotateMinuteHand, 60000);
  

• Implement similar logic for the hour hand, adjusting the rotation based on the hour.

Step 5: Adding a Clickable Calendar Window

• Create an interactive calendar window that opens when the watch is clicked.
• Use an HTML element for the calendar, and style it to appear as an overlay.
• JavaScript code to toggle the calendar visibility:

  const calendar = document.getElementById('calendar');
  document.getElementById('watch').addEventListener('click', () => {
      calendar.style.display = calendar.style.display === 'block' ? 'none' : 'block';
  });
  

• Ensure you include appropriate CSS to style the calendar window.

Conclusion

You have now created an animated watch using SVG and JavaScript! Key takeaways include the basics of SVG structure, how to manipulate graphics with JavaScript, and the ability to add interactivity. As a next step, consider customizing the watch design or expanding its functionality, such as adding more detailed calendar features or additional animations. For the complete source code, you can refer to the provided CodePen link. Happy coding!