wip perfect fit arc segment

zumerlab · Apr 24, 2023 · 717584c · 717584c
1 parent 124d201
commit 717584c
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 13 deletions.
diff --git a/examples/generic.html b/examples/generic.html
@@ -25,25 +25,53 @@
         <hr class="item line">
       </div>
       <div class="ring-1 items-5 offset-270 ccw" >
-        <div class="item xs  surface ">A</div>
+        <div class="item xs  ">A</div>
         <div class="item xs  rounded">N</div>
         <div class="item xs"> D </div>
         <div class="item xs">Y</div>
         <div class="item  xs">!</div>
       </div>
-      <div class="ring-3 items-11">
-        <div class=" item s surface ">
+      <div class="ring-3 items-7">
+        <div class=" item m lower surface ">
           <div class="content">ONU</div>
         </div>
-        <div class="item s surface">
+        <div class="item m lower surface">
           <div class="content">hola</div>
           <div class="label pos-315">
             <div class="label__text">
               text
             </div>
           </div>
         </div> 
-        <div class="item s surface">
+        <div class="item m lower surface">
+          <div class="content">1</div>
+          <div class="ring-1 items-4 offset-135 arc-90">
+            <div class="item xs ">U</div>
+            <div class="item xs  ">L</div>
+            <div class="item xs stationary" >N</div>
+            <div class="item xs">
+              <div class="ring-3 items-3"> 
+                <div class="item xxs "></div>
+                <div class="item xxs"></div>
+                <div class="item xxs ">
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div class=" item m lower surface ">
+          <div class="content">ONU</div>
+        </div>
+        <div class="item m lower surface">
+          <div class="content">hola</div>
+          <div class="label pos-315">
+            <div class="label__text">
+              text
+            </div>
+          </div>
+        </div> 
+        <div class="item m lower surface">
           <div class="content">1</div>
           <div class="ring-1 items-4 offset-135 arc-90">
             <div class="item xs ">U</div>

diff --git a/src/_radial-grid.scss b/src/_radial-grid.scss
@@ -75,32 +75,35 @@
       transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i})), 0) rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * -1deg));
     }
     .z-container>.ring-#{$i}> .item.#{$size}.surface:before {
-      transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg));
+      transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(-32px, 32px);
         z-index: -1;
         position: absolute;
         content: "";
-        --length: calc(#{$var} * 4.5);
+        --length: 150px;
         /* radius * angle in rads == arc lenght*/
-        --length-percent: calc(var(--radius-#{$i}) * (var(--angle) * 3.14 / 180) * 1px);
+        --length-percent: calc(110 * (var(--angle) * 3.14 / 180) * 1px);
         --color: orange;
-        --tickness: 30px;
+        --tickness: 100px;
         width: var(--length);
         aspect-ratio: 1;
-        background-color: transparent;
-        //border: 6px solid white;
+        //background-color: gray;
+        border: none;
         border-top: var(--tickness) solid var(--color);
         border-right: var(--tickness) solid var(--color);
         rotate: 45deg;
         border-radius: 0% 100% 0% 0% / 0% 100% 0% 0%;
         box-sizing: border-box;
+        filter: invert(6);
+        opacity: 0.3;
         //transform-origin: 0 100%;
         /* top | left*/
         clip-path: polygon(
           calc(100% - var(--length-percent)) 0,
           100% 0,
           100% var(--length-percent),
-          /* This point is key to adapt arcs to absolute center*/
-            calc(var(--length-percent) * -1) calc(var(--length-percent) + 100%)
+          0% 100%
+          /* This point is key to adapt arcs to absolute center
+            calc(var(--length-percent) * -1) calc(var(--length-percent) + 100%)*/
         );
     }
     .z-container>.ring-#{$i}> .item.#{$size}.surface:hover::before {