<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="#6C43E8">
<path d="M16,32A16,16,0,1,1,32,16,16.019,16.019,0,0,1,16,32ZM16,2A14,14,0,1,0,30,16,14.015,14.015,0,0,0,16,2Z"></path>
<path d="M16,17a1,1,0,0,1-1-1V6a1,1,0,0,1,2,0V16A1,1,0,0,1,16,17Z"></path>
<path d="M17,8v8a1,1,0,0,1-2,0V8a1,1,0,0,1,2,0Z"></path>
</svg>
svg > * {
transform-origin:50% 50%;
}
svg > :nth-last-child(2) {
/* minutes */
animation: nc-loop-clock-anim-m 0.5s infinite linear;
}
svg > :nth-last-child(1) {
/* hours */
animation: nc-loop-clock-anim-h 1s infinite linear;
}
@keyframes nc-loop-clock-anim-h {
0% {transform:rotate(90deg)}
100% {transform:rotate(450deg)}
}
@keyframes nc-loop-clock-anim-m {
0% {transform:rotate(0)}
100% {transform:rotate(360deg)}
}
body {
margin: 50px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.