WIP svg

src/components/_progress.scss

@@ -21,67 +21,49 @@
 }
 
 //derepated
-svg {
+svg.z-svg {
   display: grid;
   border-radius: inherit;
   grid-area: 1/1/1/1;
   @include alignment;
   rotate: -90deg;
-  width: calc(var(--diam) * 1px);
-  height: calc(var(--diam) * 1px);
-
+  width: calc(var(--diam));
+  height: calc(var(--diam));
 }
 
 .base {
-  cx: calc(var(--diam) / 2 * 1px);
-  cy: calc(var(--diam) / 2 * 1px);
-  r: calc((var(--diam) / 2 - var(--stroke)) * 1px);
+  cx: calc(var(--diam) / 2 );
+  cy: calc(var(--diam) / 2 );
+  r: calc((var(--diam) / 2 - var(--stroke)) );
   fill: none;
   stroke: #e6e6e6;
   stroke-dasharray: calc(360/5 - 20) 20;
   stroke-width: var(--stroke); 
 }
 
 .markers {
-  cx: calc(var(--diam) / 2 * 1px);
-          cy: calc(var(--diam) / 2 * 1px);
-          r: 140px;
-          fill: none;
-          stroke: #9119e069;
-          stroke-width: 145; 
-          stroke-dasharray: calc((140 * 3.1415 * 2)/12 - 72) 72;
-}
-.percent.hour {
-  cx: calc(var(--diam) / 2 * 1px);
-  cy: calc(var(--diam) / 2 * 1px);
-  r: calc(var(--r));
-  fill: none;
-  stroke: #e02727;
-  stroke-width: var(--stroke); 
-  stroke-dasharray: calc(var(--r) * 3.1415 * 2);
-  stroke-dashoffset: calc((100 - var(--val))/100 * (var(--r) * 3.1415 * 2));
-}
-.percent.minute {
-  cx: calc(var(--diam) / 2 * 1px);
-  cy: calc(var(--diam) / 2 * 1px);
+  --markers: 12;
+  --r: calc(var(--diam) / 2 );
+  cx: calc(var(--r));
+  cy: calc(var(--r));
   r: calc(var(--r));
   fill: none;
-  stroke: #bc26da;
-  stroke-dasharray: calc(200 * 3.1415);
-  stroke-width: var(--stroke); 
-  stroke-dasharray: calc(var(--r) * 3.1415 * 2);
-  stroke-dashoffset: calc((100 - var(--val))/100 * (var(--r) * 3.1415 * 2));
+  stroke: #9119e069;
+  stroke-width: calc(var(--r)); 
+  stroke-dasharray: calc((calc(var(--r)) * 3.1415 * 2) / calc(var(--markers)) - 72) 72;
 }
-.percent.second {
-  cx: calc(var(--diam) / 2 * 1px);
-  cy: calc(var(--diam) / 2 * 1px);
+.percent {
+  --r: calc(var(--diam) / 2 );
+  cx: var(--r);
+  cy: var(--r);
   r: calc(var(--r));
   fill: none;
-  stroke: #85e8a9;
   stroke-width: var(--stroke); 
   stroke-dasharray: calc(var(--r) * 3.1415 * 2);
   stroke-dashoffset: calc((100 - var(--val))/100 * (var(--r) * 3.1415 * 2));
 }
+
+
 // https://codepen.io/arrayzero/pen/LbvJvW
 .p50 {
   --val: 50;