alpha bubbles stage (ABS)

zumerlab · Mar 1, 2023 · 6534001 · 6534001
1 parent 58c2251
commit 6534001
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,47 @@
-# grid
+# grid
+
+
+## LAYOUT
+
+### Radial Grid
+- rows
+- columns
+- angles & distances
+- span rows
+- span cols
+- initial angle
+- diameter
+- quadrants?
+- geostationary/gyroscope
+- responsiveness
+- alignment
+
+## ELEMENTS
+
+
+## COMPONENTS
+- progress
+- modals
+- labels
+- tooltips
+- cards
+- buttons
+- forms
+
+## UTILITIES
+
+
+
+function getEllipsePoints(width, height, n) {
+  const a = width / 2;
+  const b = height / 2;
+  const points = [];
+  for (let i = 0; i < n; i++) {
+    const angle = (360 / n) * i;
+    const radians = angle * (Math.PI / 180);
+    const x = a * Math.cos(radians);
+    const y = b * Math.sin(radians);
+    points.push({ x, y });
+  }
+  return points;
+}
diff --git a/index.css b/index.css
@@ -8,6 +8,7 @@
     --m: 60px;
     --l: 100px;
     --xl: 120px;
+    --item-number: 1;
   }
 
   @property --angle {
@@ -18,13 +19,16 @@
 
   @keyframes progress {
     50% {
-      --angle: 160;
+      --angle: 130;
     }
   }
+
 
   .item {
     animation: 16s progress infinite;
   }
+
+
 
   .item.box {
     border-radius: 0%;
@@ -51,7 +55,7 @@
     /* transform-style: preserve-3d; */
   }
   .items-1 > .item {
-    --angle: calc(360 / 1);
+    --angle: calc(360 / 11);
   }
   .items-2 > .item {
     --angle: calc(360 / 2);
@@ -65,6 +69,8 @@
   .items-5 > .item {
     --angle: calc(360 / 5);
   }
+
+
 
   .level-1,
   .level-2 {
@@ -86,14 +92,9 @@
     justify-items: center;
     grid-area: 1/1/1/1;
   }
-  .orbit {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    align-items: center;
-    justify-items: center;
-  }
+
   .level-1 {
-    width: calc(var(--distance) * 2);
+    width: calc(var(--distance) * 2) + 100;
     height: calc(var(--distance) * 2);
   }
   .level-2 {
@@ -136,10 +137,9 @@
       translate(var(--distance), 0)
       rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
   }
-  .item.orbit, .pepe.orbit,
+  .item.orbit,
   .item.level-1.orbit {
-    --p1: calc(var(--angle) * var(--item-number) * 1deg);
-    transform: rotate(var(--p1))
+    transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
       translate(var(--distance), 0);
   }
 
@@ -148,6 +148,7 @@
       translate(var(--distance2), 0)
       rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
   }
+
 
   .item.d50 {
     --distance: 50px;
@@ -159,8 +160,8 @@
   .item.d10 {
     --distance: 10px;
   }
-  .item.a10 {
-    --angle: 77;
+  .item.a45 {
+    --angle: -45;
   }
   .item.s,
   .item.sm {

diff --git a/index.html b/index.html
@@ -11,21 +11,17 @@
     <div class="ring">
         <div class="level-1 items-3">
           <div class="item m">
-            <div class="line"></div>
-            <div class="content">One</div>
+           one
           </div>
-          <div class="item m items-1">
-            <div class="item xs d50 transparent orbit">
-              <svg  width='50' height='1'><line x1='0' y1='0' x2='50' y2='0' stroke='red'/></svg>
-              <span style="transform: rotate(90deg); color: red">⧩</span>
-            </div>
-
-
+          <div class="item  m">
+            <!-- prototipo de label -->
+            <div  class="item d50  transparent orbit a45 box" style="width: 50px; height: 1px; background-color: red;"></div>
+            <div class="item   box a45" style="border-color: red;width: 50px; height: 21px; --item-number:1; --distance: 70px; color: red">text</div>
           </div>
           <div class="item m items-4">
             <div class="item xs d50">4</div>
             <div class="item xs d50">5</div>
-            <div class="item xs d50">6</div>
+            <div class="item xs d50 transparent orbit" style="color: red">◃</div>
             <div class="item xs d50 items-3">
               <div class="item xxs d15"></div>
               <div class="item xxs d15"></div>
@@ -41,7 +37,10 @@
           <div class="item sm d50">e</div>
         </div>
       </div>
-
+      <script>
+        let element = document.querySelector('.giros')
+        console.log(getComputedStyle(element).getPropertyValue('transform'))
+      </script>
 
 
 </body>