Create a Clock with CSS Sin() and Cos() Trigonometry Functions

Creating a Clock with the New CSS sin() and cos() Trigonometry Functions

The new sin() and cos() trigonometry functions available in CSS make it easier than ever to create clocks, graphs, and other animations with mathematical accuracy. With these new functions, you can easily create analog clocks with just a few lines of code, allowing you to create stylish designs that are both visually appealing and mathematically sound.

Step 1 - Creating the Container

The first step is to create the necessary HTML and CSS to create a container for your clock. The basic HTML structure looks like this:

<div class="clock-container">
  <div class="clock"></div>
</div> 

The CSS to style this container would look like this:

.clock-container {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #ddd;
  position: relative;
  margin: 0 auto;
}

.clock {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

Step 2 - Drawing the Hands of the Clock

Next, you will need to draw the hands for the clock. This can be done using the sin() and cos() functions. These functions take two parameters, an angle in radians and the radius of the circle. To draw the hands, we will use the sine and cosine functions to calculate the x and y coordinates of the endpoints, which will be used to define each hand. This example will draw two hands, an hour hand and a minute hand, both with a radius of 150px. The code would look like this:

.hour-hand {
  position: absolute;
  top: 150px;
  left: 150px;
  width: 10px;
  height: 120px;
  background-color: #000;
  transform-origin: 50% 120px;
  transform: rotate(calc(2 * PI * (var(--hour) / 12)));
}

.minute-hand {
  position: absolute;
  top: 150px;
  left: 150px;
  width: 5px;
  height: 150px;
  background-color: #000;
  transform-origin: 50% 150px;
  transform: rotate(calc(2 * PI * (var(--minute) / 60)));
}

Step 3 - Updating the Clock

Finally, all that's left is to update the clock to keep accurate time. This can be done using JavaScript's Date object. The code would look something like this:

const clockContainer = document.querySelector('.clock-container');

setInterval(() => {
  const date = new Date();

  const hours = date.getHours();
  const minutes = date.getMinutes();

  clockContainer.style.setProperty('--hour', hours);
  clockContainer.style.setProperty('--minute', minutes);
}, 1000);

And that's all there is to it! With just a few lines of code, you can easily create a beautiful and accurate analog clock using the new sin() and cos() trigonometry functions in CSS.