[CONCEPT] SVG “clock” animation

[LePhenix47]

How can you make a stroke wrap around a certain % of the <circle>?

You can do that by playing with the stroke-dasharray (SDA) and stroke-dashoffset (SDO) of circle <circle>

Before setting the value of these properties in CSS, we must get the total length of the circle in JS with the method .getTotalLength():

 const svgCircle = document.querySelector("circle");

 let circleLength = svgCircle.getTotalLength();

Once that's done, we can set the values of the SDO and SDA on a local CSS variables like this:

circle{
  --length: 1;
   stroke-dasharray: var(--length);
   stroke-dashoffset: var(--length);
}

When we do that, the SVG circle should disappear

ℹ SVG Circles disappear when the SDO and SDA have the same values

Back to JS, we now set the value of that local variable to be equal to the length of the circle:

 const svgCircle = document.querySelector("circle");

 let circleLength = svgCircle.getTotalLength();

svgCircle.style.setProperty("--length", circleLength)

If we want to make the stroke “rotate” clockwise, we must multiply the SDA by 2 (view video n°1):

circle{
  --length: 1;
   stroke-dasharray: calc(var(--length) * 2);
   stroke-dashoffset: var(--length);
}

https://user-images.githubusercontent.com/78600723/224495014-54ff0e75-74ce-47bc-9814-46b06d957914.mp4

If we want it to rotate counter clock-wise, we must this time mutliply the SDO by 2 (view video n°2):

circle{
  --length: 1;
   stroke-dasharray: var(--length);
   stroke-dashoffset: calc(var(--length) * 2);
}

https://user-images.githubusercontent.com/78600723/224494989-5628d14f-3aaf-42d2-8a60-3c78dac6480e.mp4

[LePhenix47]

Link to the CodePen for the examples:

https://codepen.io/phenix47/pen/abjNrqe