Tha ring adventure

css/custom-vars.css

@@ -0,0 +1,15 @@
+.z-container {
+    /* Layout vars */
+    --angle: 1;
+    --radio: 100px;
+    --item-number: 1;
+    --ratio: 1.8;
+    /* Shape sizes */
+    --xxs: 8px;
+    --xs: 24px;
+    --s: 44px;
+    --m: 68px;
+    --l: 110px;
+    --xl: 180px;
+    --xxl: 288px;
+  }

css/index.css

@@ -0,0 +1,27 @@
+@import url(custom-vars.css);
+@import url(radial-grid.css);
+@import url(shapes.css);
+
+/* 
+  @property --angle {
+    syntax: "<number>";
+    initial-value: 1;
+    inherits: false;
+  }
+  
+  @keyframes progress {
+    50% {
+      --angle: 130;
+    }
+  }
+
+  
+  .item {
+    animation: 16s progress infinite;
+  } */
+
+
+
+
+
+

css/radial-grid.css

@@ -0,0 +1,160 @@
+.z-container {
+    display: grid;
+    grid-template-columns: minmax(var(--radio), 1fr);
+    height: 500px;
+    align-items: center;
+    justify-items: center;
+    border: 1px dashed black;
+    /* transform: rotateX(45deg); */
+    /* transform-style: preserve-3d; */
+  }
+
+  .z-container > .ring-0,
+  .z-container > .ring-1,
+  .z-container > .ring-2 {
+    display: grid;
+    border-radius: 50%;
+    border: 1px dashed rgba(155, 155, 155, 0.5);
+    align-items: center;
+    justify-items: center;
+    align-content: center;
+    justify-content: center;
+    grid-area: 1/1/1/1;
+  }
+  .item > .ring-0,
+  .item > .ring-1,
+  .item > .ring-2
+   {
+    display: grid;
+    border-radius: 50%;
+    border: 1px dashed rgba(155, 45, 155, 0.5);
+    align-items: center;
+    justify-items: center;
+
+    grid-area: 1/1/1/1;
+  }
+
+
+  .items-1 > .item {
+    --angle: calc(360 / 11);
+  }
+  .items-2 > .item {
+    --angle: calc(360 / 2);
+  }
+  .items-3 > .item {
+    --angle: calc(360 / 3);
+  }
+  .items-4 > .item {
+    --angle: calc(360 / 4);
+  }
+  .items-5 > .item {
+    --angle: calc(360 / 5);
+  }
+
+
+  .z-container > .ring-0 {
+    width: calc(var(--radio) * 2);
+    height: calc(var(--radio) * 2);
+  }
+  .z-container > .ring-1 {
+    width: calc(var(--radio) * 2);
+    height: calc(var(--radio) * 2);
+  }
+  .z-container > .ring-2 {
+    width: calc(var(--radio) * 6);
+    height: calc(var(--radio)  * 6);
+  }
+  .item > .ring-0 {
+    width: calc(var(--radio) * 2);
+    height: calc(var(--radio) * 2);
+  }
+  .item > .ring-1 {
+    width: 100px;
+    height: 100px;
+  }
+  .item > .ring-2 {
+    width: 280px;
+    height: 280px;
+  }
+  .item:nth-child(1) {
+    --item-number: 1;
+  }
+  .item:nth-child(2){
+    --item-number: 2;
+  }
+  .item:nth-child(3){
+    --item-number: 3;
+  }
+  .item:nth-child(4) {
+    --item-number: 4;
+  }
+  .item:nth-child(5){
+    --item-number: 5;
+  }
+  .item:nth-child(6) {
+    --item-number: 6;
+  }
+
+
+  .item.orbital {
+    transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
+      translate(var(--radio), 0);
+  }
+
+  .ring-0 > .item {
+    transform: rotate(calc(var(--angle) * 1deg))
+      translate(0, 0)
+  }
+
+  .z-container > .ring-1 > .item {
+    transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
+      translate(calc(var(--radio)), 0)
+      rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
+  }
+
+  .z-container > .ring-2 > .item {
+    transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
+      translate(calc(var(--radio) * 3), 0)
+      rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
+  }
+
+  .item > .ring-1 > .item {
+    transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
+      translate(30px, 0)
+      rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
+  }
+
+  .item > .ring-2 > .item {
+    transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
+      translate(90px, 0)
+      rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
+  }
+
+
+/*   .item.d0 {
+    --radio: 1px;
+  }
+  .item.d50 {
+    --radio: 50px;
+  }
+ 
+  .item.d15 {
+    --radio: 15px;
+  }
+  .item.d10 {
+    --radio: 10px;
+  } */
+  .item.a0 {
+    --angle: 0;
+  }
+  .item.a45 {
+    --angle: 45;
+  }
+  .item.a90 {
+    --angle: 90;
+  }
+  .item.a135{
+    --angle:135;
+  }
+
+

css/shapes.css

@@ -0,0 +1,62 @@
+.item {
+  display: grid;
+  background-color: white;
+  border: 1px solid black;
+  align-items: center;
+  justify-items: center;
+  grid-area: 1/1/1/1;
+}
+/* Shapes */
+.item,
+.item.circle {
+  border-radius: 50%;
+}
+.item.box {
+  border-radius: 0%;
+}
+.item.rounded {
+  border-radius: 25%;
+}
+.item.transparent {
+  border: none;
+}
+/* Sizes */
+.item.xxs {
+  width: var(--xxs);
+  height: var(--xxs);
+}
+.item.s,
+.item.small {
+  width: var(--s);
+  height: var(--s);
+}
+
+.item.xs,
+.item.extra-small {
+  width: var(--xs);
+  height: var(--xs);
+}
+
+.item,
+.item.m,
+.item.medium {
+  width: var(--m);
+  height: var(--m);
+}
+
+.item.l,
+.item.large {
+  width: var(--m);
+  height: var(--m);
+}
+
+.item.xl,
+.item.extra-large {
+  width: var(--xl);
+  height: var(--xl);
+}
+
+.item.xxl {
+  width: var(--xxl);
+  height: var(--xxl);
+}