pulsating loading logo

src/livecodes/styles/index.css

@@ -95,77 +95,65 @@ body,
   }
 }
 
-/* Logo SVG */
-.B {
-  stroke: none;
-}
-
-.C {
-  fill: url('#C');
-}
-
-.E {
-  fill-rule: nonzero;
-}
-
-@keyframes pulse2 {
-  0%,
-  100% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
 @keyframes pulse {
   0%,
   100% {
-    opacity: 0.9;
+    transform: scale(0.8) translateY(-4%) translateX(-7%);
   }
 
   50% {
-    opacity: 1;
+    transform: scale(1);
   }
 }
 
 @keyframes colorPulse {
   0%,
   100% {
-    stop-color: #d7d7d7;
+    stop-color: #8a8a8a;
   }
 
   50% {
-    stop-color: #b0b0b0;
+    stop-color: #d7d7d7;
   }
 }
 
 @keyframes colorPulse2 {
   0%,
   100% {
-    stop-color: #626262;
+    stop-color: #444;
   }
 
   50% {
-    stop-color: #444;
+    stop-color: #626262;
   }
 }
 
-#loading:not(.click-to-load) #cube-container {
-  animation: pulse2 3s ease-in-out infinite;
-  scale: 0.9;
+svg .B {
+  stroke: none;
+}
+
+svg .C {
+  fill: url('#C');
+}
+
+svg .E {
+  fill-rule: nonzero;
+}
+
+#loading:not(.click-to-load) svg #cube-container {
+  animation: pulsate 3s ease-in-out infinite;
   transform-origin: center;
 }
 
-#loading:not(.click-to-load) #inner-cube {
-  animation: pulse 2s ease-in-out infinite;
+#loading:not(.click-to-load) svg #inner-cube {
+  animation: pulse 3s ease-in-out infinite;
+  transform-origin: center;
 }
 
-#loading:not(.click-to-load) #gradient-stop-1 {
-  animation: colorPulse 4s ease-in-out infinite;
+#loading:not(.click-to-load) svg #gradient-stop-1 {
+  animation: colorPulse 1s ease-in-out infinite;
 }
 
-#loading:not(.click-to-load) #gradient-stop-2 {
-  animation: colorPulse2 4s ease-in-out infinite;
+#loading:not(.click-to-load) svg #gradient-stop-2 {
+  animation: colorPulse2 1s ease-in-out infinite;
 }