Here too I have used symbols in that place instead of using numbers from 1 to 12. In this watch, I have made the hour hand the smallest, then the minute and second hand respectively.
If you want to see how this analog clock works then you can watch the demo below. Here I have provided the required source code so you can copy the code and use it in your own work.
See the Pen
analog clock 7 by Foolish Developer (@fghty)
The time of this watch will depend on the time of your device. Time will be taken once then it will be updated every second.
Hope you like this design. I have shared the complete tutorial below on how I made this design. Hope the tutorial below will help you.
For this, first of all, you have to create an HTML and CSS file.
Step 1: Create the basic structure of the clock
This HTML code is basically the basic structure of this analog clock. I have used some amount of CSS code to design the background and shape this watch. As you can see in the picture above it is made in the form of a neomorphic design. Here I have used CSS code to implement that Neumorphism design.
As you can see in the demo above I used a border around this watch to make the code border: 7px solid # 282828. I used box-shadow to make it clearer. border-radius 50% gave this watch a round shape. I also used height and width 30 rem. If you want to make this watch bigger, you can increase its size.
Step 2: Make a mark from 1 to 12 on the clock
The design I have made for beginners so in this case, I have easily used symbols instead of numbers from 1 to 12. I have used the following HTML and CSS code to create these symbols. First of all, I made two lines using the following codes. I put these two lines at 90 degrees to each other.
I made a circle using the HTML and CSS code below. As a result, the middle of the long lines are covered and it has a full 1 to 12 mark size.
Step 3: Make three hands to indicate the time
In this cell, I have used three hands which have been made using HTML and CSS code below.
If there is a problem or this code does not work, you can let me know by commenting.
I implemented my own flavor of your clock. Thanks again for this.
Worked straight out of the box for my "home dashboard".
Did two small tweaks to get a "floating" second hand.
If any one are interested:
// Add fractions of seconds to calculation to allow for smooth second hand. (add things after +)
const seconds = now.getSeconds()+now.getMilliseconds()/1000;
// update 10 times a second (1000 is original)