seconds in a circle corner (like a clock)

Question

I'm trying to create a circle that has small pins around (like seconds in a clock) to be like 60 of them (to count a minute) here is a picture to describe what I mean

https://www.123rf.com/photo_91759207_stock-vector-close-up-of-digital-timer-showing-time-that-is-running-out-only-25-seconds-left-clock-on-vector-illu.html

I'm using React, javascript, css, how can I make a loop that each pin would be stack to the circle 'corner' to fit his place ? I'm having really hard time to find a way how to arrange them to look like it.

my final goal is to create a component that will receive a fill as prop that will represent the number of pins that needs to be in a different color, so I need a way to be able to control the background-color of each pin.

any advice would be awesome. thanks!

You could do something like this in SVG. See here: https://stackoverflow.com/a/53458317/5385381 — ksav, Dec 01 '18 at 11:54

score 3 · Answer 1 · edited Dec 01 '18 at 11:34

3

Do you mean something like the following? The code will create 60 "pins" for all tags with the class clock.

window.onload = function() {
    var clocks = document.getElementsByClassName('clock'),
        r = 0, i, j, d, clock;
    for(j=0;j<clocks.length;j++) {
        clock = clocks[j]
        for(i=0;i<60;i++) {
            d = document.createElement('div');
            d.style.transform = "rotate("+ r +"deg)";
            clock.appendChild(d);
            r += 6;
        }
    }
}

.clock {
   position:relative;
   width:180px;
   height:180px;
   background:#eee;
}
.clock > div {
   position:absolute;
   margin-left:87px;
   width:6px;
   height:160px;
   bottom:10px;
   background: linear-gradient(to bottom, #491 16px, transparent 16px);
}

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

edited Dec 01 '18 at 11:34

rafaelcastrocouto

11,781
3
38
63

answered Dec 01 '18 at 11:23

Tigger

8,980
5
36
40

Do you mind if I edit your post to create 60 elements in JS? – rafaelcastrocouto Dec 01 '18 at 11:26
thanks for the answer, but is there a way to do it without using linear-gradient ? – greW Dec 01 '18 at 13:27
it's a great solution, but I also need a way to give a different color for each pin – greW Dec 01 '18 at 13:38
@greW : You can use `d.setAttribute("id","s"+i)` in the creation loop, then you can control each element externally. You can change the colour of each with something like `d.style.background = "linear-gradient(to bottom, rgba("+ cssR +","+ cssG +","+ cssB +",1) 16px, transparent 16px)"` as well. – Tigger Dec 01 '18 at 23:02

ksav · Accepted Answer · 2018-12-01T16:34:33.267

Drawing the 'clock face' itself is easily done with SVG and stroke-dasharray.

Animating the clock can be done with an SVG mask, and some javascript to change the stroke-dashoffset.

An explanation of the maths for coming up with the values for the stroke-dasharray can be found in this answer.

const maskCircle = document.querySelector(".mask");
const clockText = document.querySelector(".clock-text");
const r = 50;
const c = 2 * r * Math.PI;

let secondsLeft = 60;

window.setInterval(function() {
  if (secondsLeft > 0) {
    secondsLeft--;
    clockText.innerText = secondsLeft;
    maskCircle.style.strokeDashoffset =
      maskCircle.style.strokeDashoffset - c / 60 * -1;
  } else {
    clearInterval();
  }
}, 1000);

body {
  background: black;
}

.clock {
  margin: 0 auto;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.clock-face {
  stroke-width: 15;
  stroke-linecap: butt;
  fill: transparent;
  stroke-dasharray: 2.236 3;
}

.grey {
  stroke: #333;
}

.white {
  stroke: white;
}

.mask {
  stroke-dasharray: 314.15 314.15;
  stroke-dashoffset: 0;
}

.clock-text {
  width: 100%;
  margin: 0 auto;
  color: white;
  text-align: center;
  position: absolute;
  top: 50%;
  font-size: 6em;
  transform: translateY(-50%);
}

<div class="clock">
  <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
    <mask id="mask">
      <circle class="clock-face white mask" cx="50" cy="50" r="50" transform="rotate(-90.5 50 50)" />
    </mask>
  </defs>
    <circle class="clock-face grey" cx="50" cy="50" r="50" />
    <circle class="clock-face white" cx="50" cy="50" r="50" mask="url(#mask)" />  
  </svg>
  <div class="clock-text">60</div>
</div>

seconds in a circle corner (like a clock)

2 Answers2