-2

I have two separate images. One is the clock without the arrow and the other is the clock arrow. Both are SVG images (vector).

I need to create like a clock in a Web Application where the 360 spin of the arrow depends on a time variable. For example if the time variable = 2 minutes then the arrow has to spin the complete circle in 2 minutes.

Here are the sample images:

enter image description here

What is the best approach to do this?

  • HTML5 Canvas
  • jQuery
halfer
  • 19,824
  • 17
  • 99
  • 186
VAAA
  • 14,531
  • 28
  • 130
  • 253

1 Answers1

1

The images you provided aren't vector, nor are they separate, but here is the basic idea:

div {
  position: relative;
  width: 100px;
  height: 100px;
  background-image: url(https://i.stack.imgur.com/qjlyA.png);
  background-size: cover
}

div div {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-image: url(https://i.stack.imgur.com/qjlyA.png);
  background-size: cover;
  background-position: top right;
  animation: rot 2s linear 0s infinite;
  transform-origin: bottom right;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
<div>
  <div style="animation-duration: 5s"></div>
</div>
Robert McKee
  • 21,305
  • 1
  • 43
  • 57