Develop Reference

seconds in a circle corner (like a clock)

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!

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>

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>

Polymer 3.0 Custom Element - How to Use javascript to interact with SVG

I am new on Polymer, so I'm learning while developing. Right now I'm using the latest version, Polymer 3.0. I already had a working frontpage on this site I'm working on. While I was trying to make everything work on polymer, I got stuck with making the javascript work.
On the original site, I was using this code
index.html
<div class="year-overview">
<div class="ano-lectivo">
<svg class="progress-ring" width="50%" height="50%" opacity="0" viewBox="0 0 42 42">
<circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
<text x="50%" y="53%" class="circle-text" text-anchor="middle">
<tspan class="currentDay">35</tspan>
<tspan class="daysLeft">/ 300</tspan>
<tspan x="50%" y="60%">Días Lectivos</tspan>
</text>
</svg>
</div>
And this is the javascript file:
function circleCircus(ringClass, circleClass, ringProgress) {
var circle = document.querySelector(circleClass);
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
var circleSVG = document.querySelector(ringClass); //For changing the opacity and not showing the circle before it loads
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
function setProgress(percent) {
const offset = circumference - percent / 100 * circumference;
circle.style.strokeDashoffset = offset;
}
setTimeout(function() {circleSVG.setAttribute("opacity", "100%");}, 1000); //Changing the circle opacity
setTimeout(function() { setProgress(ringProgress); }, 2000); //Changin the value in order to animate
}
//----------------------Progress Bar 1------------------------------------
circleCircus('.progress-ring', '.progress-ring__circle', 50);
Now that I'm working on Polymer I was creating a custom element for the donut chart, but I don't how to use or where to put the function that makes the strokeDasharray and the strokeDashoffset work correctly:
import { PolymerElement, html } from '#polymer/polymer/polymer-element.js';
class DonutChart extends PolymerElement {
static get template() {
return html`
<style>
.progress-ring__circle {
stroke-width: 3;
stroke: #000;
position: relative;
transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out;
-webkit-transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out; /* For Safari 3.1 to 6.0 */
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.currentDay {
font-size: 40%;
overflow: visible;
-webkit-transition: font-size 500ms ease-out; /* For Safari 3.1 to 6.0 */
transition: font-size 500ms ease-out;
}
.daysLeft {
font-size: 40%;
-webkit-transition: font-size 500ms, color 500ms; /* For Safari 3.1 to 6.0 */
transition: font-size 500ms, color 500ms;
}
.description {
font-size: 20%;
}
.circle-text {
fill: #000;
}
.progress-ring {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
svg:hover .currentDay {
font-size: 60%;
}
svg:hover .daysLeft {
font-size: 10%;
}
svg:hover .progress-ring__circle {
stroke-width: 1;
stroke: #5a64ed;
}
</style>
<svg class="progress-ring" width="100%" height="100%" viewBox="0 0 42 42">
<circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
<text x="50%" y="53%" class="circle-text" text-anchor="middle">
<tspan class="numbers" x="54%" y="50%"><tspan class="currentDay">35</tspan><tspan class="daysLeft">/300</tspan></tspan>
<tspan x="50%" y="60%" class="description">Días Lectivos</tspan>
</text>
</svg>
`;
}
constructor() {
super();
}
var circle = this.shadowRoot.querySelector('.progress-ring__circle');
var radius = circle.r.baseVal.value;
var circumference = radiius * 2 * Math.PI;
var circleSVG = this.shadowRoot.querySelector('.progress-ring');
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
function setProgress(percent) {
const offset = circumference - percent / 100 * circumference;
circle.style.strokeDashoffset = offset;
}
setProgress(79);
}
customElements.define('donut-chart', DonutChart);
Here is my original code and what I'm trying to accomplish in the custom element: https://codepen.io/maganalexis/pen/ePOxYX
Thank you for helping out.

After reading a lot of documents I found out the solution, I had to call the ready method and put my code under it:
import { PolymerElement, html } from '#polymer/polymer/polymer-element.js';
class DonutChart extends PolymerElement {
static get template() {
return html`
<style>
.progress-ring__circle {
stroke-width: 3;
stroke: #000;
position: relative;
transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out;
-webkit-transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out; /* For Safari 3.1 to 6.0 */
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.currentDay {
font-size: 40%;
overflow: visible;
-webkit-transition: font-size 500ms ease-out; /* For Safari 3.1 to 6.0 */
transition: font-size 500ms ease-out;
}
.daysLeft {
font-size: 40%;
-webkit-transition: font-size 500ms, color 500ms; /* For Safari 3.1 to 6.0 */
transition: font-size 500ms, color 500ms;
}
.description {
font-size: 20%;
}
.circle-text {
fill: #000;
}
.progress-ring {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
svg:hover .currentDay {
font-size: 60%;
}
svg:hover .daysLeft {
font-size: 10%;
}
svg:hover .progress-ring__circle {
stroke-width: 1;
stroke: #5a64ed;
}
</style>
<svg class="progress-ring" on-load="circleCircus" width="100%" height="100%" viewBox="0 0 42 42">
<circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
<text x="50%" y="53%" class="circle-text" text-anchor="middle">
<tspan class="numbers" x="54%" y="50%"><tspan class="currentDay">[[progressNum]]</tspan><tspan class="daysLeft">[[totalNum]]</tspan></tspan>
<tspan x="50%" y="60%" class="description">[[lowDescription]]</tspan>
</text>
</svg>
`;
}
static get properties() {
return {
progressNum: {
type: Number
},
totalNum: {
type: String
},
lowDescription: {
type: String
}
};
}
constructor() {
super();
}
ready(){
super.ready();
var circle = this.shadowRoot.querySelector('.progress-ring__circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
var circleSVG = this.shadowRoot.querySelector('.progress-ring'); //For changing the opacity and not showing the circle before it loads
var proNum = `${this.progressNum}`;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
function setProgress(percent) {
const offset = circumference - percent / 100 * circumference;
circle.style.strokeDashoffset = offset;
}
setTimeout(function() {circleSVG.setAttribute("opacity", "100%");}, 1000); //Changing the circle opacity
setTimeout(function() { setProgress(proNum); }, 2000); //Changin the value in order to animate
}
}
customElements.define('donut-chart', DonutChart);

circle svg with 8 arc rotate clockwise and anti-clockwise

Please help me on this.
I've this svg shown in this image Image
and its my code here:
var arcpoint = [-31, -66, -101, -136, -171, -206, -241, -276];
colors = ["red", "green", "blue", "orange", "yellow", "purple", "pink"];
for (var i = 0; i < colors.length; i++) {
document.querySelector("#" + colors[i]).style.strokeDashoffset = arcpoint[i];
}
svg {
height: 100px;
width: 100px;
}
circle {
stroke-width: 4px;
fill: transparent;
}
#gray {
stroke: gray;
}
#red {
stroke: red;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#green {
stroke: green;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#blue {
stroke: blue;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#orange {
stroke: orange;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#yellow {
stroke: yellow;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#purple {
stroke: purple;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#pink {
stroke: pink;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
<div id="orbit">
<svg viewBox='0 0 100 100'>
<circle cx='50' cy='50' r='45' id='gray'/>
<circle cx='50' cy='50' r='45' id='red'/>
<circle cx='50' cy='50' r='45' id='green'/>
<circle cx='50' cy='50' r='45' id='blue'/>
<circle cx='50' cy='50' r='45' id='orange'/>
<circle cx='50' cy='50' r='45' id='yellow'/>
<circle cx='50' cy='50' r='45' id='purple'/>
<circle cx='50' cy='50' r='45' id='pink'/>
</svg>
</div>
Now i want to rotate all arc's clockwise and anti-clockwise by clicking on a button.
Problem is, my mind is stuck on how to make function and loop to change colors and rotate clockwise and anti-clockwise.
Any help would be appreciated.
Thanks in advance!

You can easily use a css animation and then just add the class to your svg on a click function. Like this:
var arcpoint = [-31, -66, -101, -136, -171, -206, -241, -276];
colors = ["red", "green", "blue", "orange", "yellow", "purple", "pink"];
for (var i = 0; i < colors.length; i++) {
document.querySelector("#" + colors[i]).style.strokeDashoffset = arcpoint[i];
}
$('.left').click(function(){
$("#orbit svg").attr("class", "rotating-left");
});
$('.right').click(function(){
$("#orbit svg").attr("class", "rotating-right");
});
svg {
height: 100px;
width: 100px;
}
circle {
stroke-width: 4px;
fill: transparent;
}
#gray{
stroke: gray;
}
#red{
stroke: red;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#green{
stroke: green;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#blue{
stroke: blue;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#orange{
stroke: orange;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#yellow{
stroke: yellow;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#purple{
stroke: purple;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#pink{
stroke: pink;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
.rotating-right {
animation: rotating-right 2s linear infinite;
}
#keyframes rotating-right {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating-left {
animation: rotating-left 2s linear infinite;
}
#keyframes rotating-left {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="orbit" >
<svg viewBox='0 0 100 100' >
<circle cx='50' cy='50' r='45' id='gray'/>
<circle cx='50' cy='50' r='45' id='red'/>
<circle cx='50' cy='50' r='45' id='green'/>
<circle cx='50' cy='50' r='45' id='blue'/>
<circle cx='50' cy='50' r='45' id='orange'/>
<circle cx='50' cy='50' r='45' id='yellow'/>
<circle cx='50' cy='50' r='45' id='purple'/>
<circle cx='50' cy='50' r='45' id='pink'/>
</svg>
</div>
<button class="left">left</button>
<button class="right">right</button>
Notice I used $("#orbit svg").attr("class", "rotating-right"); as you can't use addClass on a svg with jQuery

Maybe you want something like this?
var colors = ["gray", "red", "green", "blue", "orange", "yellow", "purple", "pink"];
var rotateOffset = 0;
function setColours()
{
for (var i = 0; i < colors.length; i++) {
var arcIndex = (i + rotateOffset) % colors.length;
document.querySelector("#" + colors[i]).style.strokeDashoffset = (arcIndex ) * -35.3;
}
}
// Set initial colours
setColours();
// Button handlers
document.getElementById('left').addEventListener("click", function() {
rotateOffset += (colors.length - 1);
setColours();
});
document.getElementById('right').addEventListener("click", function() {
rotateOffset++
setColours();
});
svg {
height: 100px;
width: 100px;
}
circle {
stroke-width: 4px;
fill: transparent;
}
#gray{
stroke: gray;
}
#red{
stroke: red;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#green{
stroke: green;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#blue{
stroke: blue;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#orange{
stroke: orange;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#yellow{
stroke: yellow;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#purple{
stroke: purple;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#pink{
stroke: pink;
stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
<div id="orbit" >
<svg viewBox='0 0 100 100' >
<circle cx='50' cy='50' r='45' id='gray'/>
<circle cx='50' cy='50' r='45' id='red'/>
<circle cx='50' cy='50' r='45' id='green'/>
<circle cx='50' cy='50' r='45' id='blue'/>
<circle cx='50' cy='50' r='45' id='orange'/>
<circle cx='50' cy='50' r='45' id='yellow'/>
<circle cx='50' cy='50' r='45' id='purple'/>
<circle cx='50' cy='50' r='45' id='pink'/>
</svg>
</div>
<button id="left">left</button>
<button id="right">right</button>

JavaScript if CSS animation ended

I am making a game in HTML/JavaScript and as part of this there is a "special ability" that can only be triggered every x seconds. I have created a GUI element that displays whether the ability is yet ready for use. Because I am using CSS animations, I want to check if, on a keypress, the element has finished animating (indicating that it is ready).
I want to do this in a simple if statement, rather than using addEventListener but I am not sure if this is possible.
My code so far is:
var keystate = {};
window.addEventListener("keydown", function(e) {
keystate[e.keycode || e.which] = true;
}, true);
window.addEventListener("keyup", function(e) {
keystate[e.keycode || e.which] = false;
}, true);
window.setInterval(function() {
if (keystate[87]) { //w key, THIS is where I want to check if the animation has completed as well
//do stuff
document.getElementById("circle_flash_glow").classList.add("circle_flash_use");
}
}, 16.666666666666667);
#svg_circle_loader {
position: absolute;
right: 0;
bottom: 0;
background: none;
border: none;
margin: none;
padding: none;
}
#circle_flash_loader {
fill: none;
stroke: #F00;
stroke-width: 10px;
stroke-dashoffset: 80;
animation-fill-mode: forwards;
}
.circle_loader_load {
animation: circle_flash_loading linear;
animation-duration: 2.5s;
}
#keyframes circle_flash_loading {
0% {
stroke-dasharray: 0, 314;
}
100% {
stroke-dasharray: 314, 0;
}
}
#circle_flash_glow {
fill: none;
stroke: #F00;
stroke-width: 0px;
animation-fill-mode: forwards;
opacity: 1;
}
.circle_flash_use {
animation: circle_flash_pulse 0.6s ease-out;
}
#keyframes circle_flash_pulse {
0% {
opacity: 1;
stroke-width: 0px;
}
100% {
opacity: 0;
stroke-width: 70px;
}
}
<svg id="svg_circle_loader" width="200" height="200">
<defs>
<filter id="f1" x="-50" y="-50" width="200" height="200">
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
</defs>
<circle cx="100" cy="100" r="50" id="circle_flash_glow" class="" filter="url(#f1)"></circle>
<circle cx="100" cy="100" r="50" id="circle_flash_loader" class="circle_loader_load"></circle>
</svg>

Add a variable to set the current state, and set it with setTimeout() for checking whether it is animating or not. also add window.onload to get its state by adding
window.onload=function(){
animating=true;
sts.value=animating;
window.setTimeout(function() {
animating=false;
sts.value=animating;
}, 2500);
};
where I am using 2500. because your css animation property has
2.5s=2500ms
var animating = false;
var keystate = {};
window.addEventListener("keydown", function(e) {
keystate[e.keycode || e.which] = true;
}, true);
window.addEventListener("keyup", function(e) {
keystate[e.keycode || e.which] = false;
}, true);
window.setInterval(function() {
if (keystate[87]) { //w key, THIS is where I want to check if the animation has completed as well
//do stuff
if (!animating) {
alert("animation finished");
document.getElementById("circle_flash_glow").classList.add("circle_flash_use");
}
}
}, 16.666666666666667);
window.onload = function() {
animating = true;
sts.value = animating;
window.setTimeout(function() {
animating = false;
sts.value = animating;
}, 2500);
};
#svg_circle_loader {
position: absolute;
right: 0;
bottom: 0;
background: none;
border: none;
margin: none;
padding: none;
}
#circle_flash_loader {
fill: none;
stroke: #F00;
stroke-width: 10px;
stroke-dashoffset: 80;
animation-fill-mode: forwards;
}
.circle_loader_load {
animation: circle_flash_loading linear;
animation-duration: 2.5s;
}
#keyframes circle_flash_loading {
0% {
stroke-dasharray: 0, 314;
}
100% {
stroke-dasharray: 314, 0;
}
}
#circle_flash_glow {
fill: none;
stroke: #F00;
stroke-width: 0px;
animation-fill-mode: forwards;
opacity: 1;
}
.circle_flash_use {
animation: circle_flash_pulse 0.6s ease-out;
}
#keyframes circle_flash_pulse {
0% {
opacity: 1;
stroke-width: 0px;
}
100% {
opacity: 0;
stroke-width: 70px;
}
}
<svg id="svg_circle_loader" width="200" height="200">
<defs>
<filter id="f1" x="-50" y="-50" width="200" height="200">
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
</defs>
<circle cx="100" cy="100" r="50" id="circle_flash_glow" class="" filter="url(#f1)"></circle>
<circle cx="100" cy="100" r="50" id="circle_flash_loader" class="circle_loader_load"></circle>
</svg>
<input id="sts" value="" />

How to set ID attribute to svg elements according to displaying order?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1069" height="575" xml:space="preserve">
<desc>Created with Fabric.js 1.4.13</desc>
<defs></defs>
<rect x="-20" y="-20" rx="10" ry="10" width="40" height="40" style="stroke: black; stroke-width: 0.3; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: DarkSalmon; fill-rule: nonzero; opacity: 1;"
transform="translate(461.15 451.15)" id="0"></rect>
<rect x="-20" y="-20" rx="10" ry="10" width="40" height="40" style="stroke: black; stroke-width: 0.3; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: DarkSalmon; fill-rule: nonzero; opacity: 1;" transform="translate(429.15 310.15)"
id="1"></rect>
<rect x="-20" y="-20" rx="10" ry="10" width="40" height="40" style="stroke: black; stroke-width: 0.3; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: DarkSalmon; fill-rule: nonzero; opacity: 1;" transform="translate(351.15 177.15)"
id="2"></rect>
this code has generated by fabricjs.1st added rect object is placed in first line in svg code.before genarate the svg code i change the positions of rect object by dragging.but the svg code has not changed acording to that.what i want to do is set the ID to every rect in svg code acording to displaying order.displaying order means top to bottom or bottom to top on screen.is it possible to do?thank you.

You can use this JS to give each 'rect' tag an id based on its location.
var SVG = document.getElementsByTagName('svg')[0];
var children = SVG.childNodes;
var ID = 0;
[].forEach.call(children, function (child) {
if(child.nodeType === 1 && child.tagName == "rect"){
child.setAttribute('id', ID);
ID++;
}
});
This will give the id 0 to the first 'rect' 1 to the next and so on.