Grawl · October 31, 2022 05:07 · Oct 31, 2022
diff --git a/input.scss b/input.scss
@@ -0,0 +1,25 @@
+@for $i from 1 through 300 {
+  $z: (random(360) * 1deg); // random angle to rotateZ
+  $y: (random(360) * 1deg); // random to rotateX
+  $hue: ((40/300 * $i) + 0); // set hue
+  $orb-size: 100px;
+  $time: 1s;
+
+  circle:nth-child(#{$i}){ // grab the nth particle
+    animation: orbit#{$i} $time infinite;
+    animation-delay: ($i * .01s); 
+    fill: hsla($hue, 100%, 50%, 1);
+  }
+
+  @keyframes orbit#{$i}{ 
+    10% {
+      transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z);
+    }
+    80% {
+      transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z);
+    }
+    100% {
+       transform: rotateZ(-$z) rotateY($y) translateX( ($orb-size) ) rotateZ($z); 
+    }
+  }
+}
diff --git a/output.css b/output.css
diff --git a/settings.json b/settings.json
@@ -0,0 +1,9 @@
+{
+  "sass": {
+    "compiler": "dart-sass/1.32.12",
+    "extensions": {},
+    "syntax": "SCSS",
+    "outputStyle": "expanded"
+  },
+  "autoprefixer": true
+}