From 1837ec1ea071ab0ce4253d345687a0123ff737f8 Mon Sep 17 00:00:00 2001
From: Xaver Maierhofer <xaver.maierhofer@xwissen.info>
Date: Fri, 31 Mar 2017 23:49:04 +0200
Subject: [PATCH] [TASK] Animate logo

---
 assets/logo.svg           | 27 +++++++++++++++++++++++++--
 scss/modules/_loader.scss | 16 ----------------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/assets/logo.svg b/assets/logo.svg
index b8d9c32..c06717b 100644
--- a/assets/logo.svg
+++ b/assets/logo.svg
@@ -2,6 +2,29 @@
   <title>
     Meshviewer
   </title>
-  <path d="m 41.426847,11.807177 a 11.89,11.89 0 1 0 -7.75,20.919993 12,12 0 0 0 4,-0.7 l 15.81,16.66 a 13.45,13.45 0 0 1 5.08,-4.82 l -15.25,-16.07 a 11.9,11.9 0 0 0 -1.89,-15.989993 z m -11.25,13.119993 a 5.41,5.41 0 1 1 3.5,1.29 5.35,5.35 0 0 1 -3.5,-1.29 z m 20.86,33.55 -28.39,16 c -0.24,-0.23 -0.49,-0.46 -0.75,-0.67 a 13.38,13.38 0 1 0 4.45,6.62 l 28.13,-15.85 a 14,14 0 0 1 -3.44,-6.1 z m -32.12,30.06 a 6.86,6.86 0 1 1 1.45,-5 6.85,6.85 0 0 1 -1.45,5 z M 119.4569,3.8671829 A 15.09,15.09 0 0 0 96.456847,22.64717 l -23.44,21.69 a 13.58,13.58 0 0 1 4.75,5.14 l 23.390033,-21.61 A 15.1,15.1 0 0 0 119.4569,3.8671829 Z m -3.3,17.0599871 a 8.62,8.62 0 1 1 2,-6.26 8.6,8.6 0 0 1 -2,6.31 z m -4.05,52.4 a 11.23,11.23 0 0 0 -14.690053,0.07 l -18.76,-12.53 a 13.56,13.56 0 0 1 -3.9,5.81 l 19.1,12.74 a 11.24,11.24 0 1 0 18.280053,-6.09 z m -3.72,11.62 a 4.74,4.74 0 0 1 -3.61,1.65 4.74,4.74 0 0 1 -3.59001,-7.82 4.74,4.74 0 0 1 3.61001,-1.65 4.67,4.67 0 0 1 3.06,1.14 4.75,4.75 0 0 1 0.53,6.68 z" fill="#ad2358"/>
-  <path fill="#f4c72f" d="m 101.52068,52.899268 a 6.2809967,6.2864323 0 0 0 -8.861411,0.190195 6.2109856,6.2163606 0 0 0 -1.310208,2.102151 L 82.787703,54.711122 A 17.502777,17.517924 0 0 0 67.185227,38.51455 v -8.939146 a 6.3810126,6.3865347 0 1 0 -3.820606,0 v 8.949156 a 17.552785,17.567976 0 0 0 -6.781076,32.753514 l -2.5204,5.896032 a 6.3810126,6.3865347 0 1 0 3.510557,1.521557 l 2.5204,-5.966104 A 17.512779,17.527935 0 0 0 82.637679,58.545045 l 8.491348,0.470482 A 6.2709951,6.276422 0 1 0 101.53068,52.899268 Z M 54.513216,85.602731 a 2.4403873,2.4424992 0 0 1 -2.000317,0 2.4103825,2.4124684 0 0 1 -1.230196,-1.161189 2.4403873,2.4424992 0 0 1 3.160502,-3.3234 2.4103825,2.4124684 0 0 1 1.230195,1.161188 2.4503888,2.4525094 0 0 1 -1.130179,3.323401 z M 63.384624,22.01767 a 2.4403873,2.4424992 0 0 1 1.860295,-0.85087 2.4103825,2.4124684 0 0 1 1.590252,0.590604 2.4403873,2.4424992 0 0 1 -1.590252,4.304404 2.4103825,2.4124684 0 0 1 -1.590252,-0.590604 2.4503888,2.4525094 0 0 1 -0.230037,-3.453534 z m 9.881568,40.86181 a 10.591681,10.600847 0 1 1 2.510398,-7.697876 10.571678,10.580826 0 0 1 -2.480393,7.697876 z m 25.654071,-3.753841 a 2.4403873,2.4424992 0 0 1 -4.200667,-1.831874 2.4103825,2.4124684 0 0 1 0.670107,-1.551588 2.4403873,2.4424992 0 0 1 4.200666,1.831875 2.4103825,2.4124684 0 0 1 -0.640101,1.551587 z"/>
+  <style>
+    path.fade {
+      animation: 1s fade ease-out infinite alternate;
+    }
+
+    path.spin {
+      animation: 2.3s spin linear infinite;
+      transform-origin: 65.4px 56px;
+    }
+
+    @keyframes fade {
+      to {
+        filter: grayscale(.8);
+        opacity: .2;
+      }
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+  <path class="fade" d="m 41.426847,11.807177 a 11.89,11.89 0 1 0 -7.75,20.919993 12,12 0 0 0 4,-0.7 l 15.81,16.66 a 13.45,13.45 0 0 1 5.08,-4.82 l -15.25,-16.07 a 11.9,11.9 0 0 0 -1.89,-15.989993 z m -11.25,13.119993 a 5.41,5.41 0 1 1 3.5,1.29 5.35,5.35 0 0 1 -3.5,-1.29 z m 20.86,33.55 -28.39,16 c -0.24,-0.23 -0.49,-0.46 -0.75,-0.67 a 13.38,13.38 0 1 0 4.45,6.62 l 28.13,-15.85 a 14,14 0 0 1 -3.44,-6.1 z m -32.12,30.06 a 6.86,6.86 0 1 1 1.45,-5 6.85,6.85 0 0 1 -1.45,5 z M 119.4569,3.8671829 A 15.09,15.09 0 0 0 96.456847,22.64717 l -23.44,21.69 a 13.58,13.58 0 0 1 4.75,5.14 l 23.390033,-21.61 A 15.1,15.1 0 0 0 119.4569,3.8671829 Z m -3.3,17.0599871 a 8.62,8.62 0 1 1 2,-6.26 8.6,8.6 0 0 1 -2,6.31 z m -4.05,52.4 a 11.23,11.23 0 0 0 -14.690053,0.07 l -18.76,-12.53 a 13.56,13.56 0 0 1 -3.9,5.81 l 19.1,12.74 a 11.24,11.24 0 1 0 18.280053,-6.09 z m -3.72,11.62 a 4.74,4.74 0 0 1 -3.61,1.65 4.74,4.74 0 0 1 -3.59001,-7.82 4.74,4.74 0 0 1 3.61001,-1.65 4.67,4.67 0 0 1 3.06,1.14 4.75,4.75 0 0 1 0.53,6.68 z" fill="#ad2358"/>
+  <path class="spin" fill="#f4c72f" d="m 101.52068,52.899268 a 6.2809967,6.2864323 0 0 0 -8.861411,0.190195 6.2109856,6.2163606 0 0 0 -1.310208,2.102151 L 82.787703,54.711122 A 17.502777,17.517924 0 0 0 67.185227,38.51455 v -8.939146 a 6.3810126,6.3865347 0 1 0 -3.820606,0 v 8.949156 a 17.552785,17.567976 0 0 0 -6.781076,32.753514 l -2.5204,5.896032 a 6.3810126,6.3865347 0 1 0 3.510557,1.521557 l 2.5204,-5.966104 A 17.512779,17.527935 0 0 0 82.637679,58.545045 l 8.491348,0.470482 A 6.2709951,6.276422 0 1 0 101.53068,52.899268 Z M 54.513216,85.602731 a 2.4403873,2.4424992 0 0 1 -2.000317,0 2.4103825,2.4124684 0 0 1 -1.230196,-1.161189 2.4403873,2.4424992 0 0 1 3.160502,-3.3234 2.4103825,2.4124684 0 0 1 1.230195,1.161188 2.4503888,2.4525094 0 0 1 -1.130179,3.323401 z M 63.384624,22.01767 a 2.4403873,2.4424992 0 0 1 1.860295,-0.85087 2.4103825,2.4124684 0 0 1 1.590252,0.590604 2.4403873,2.4424992 0 0 1 -1.590252,4.304404 2.4103825,2.4124684 0 0 1 -1.590252,-0.590604 2.4503888,2.4525094 0 0 1 -0.230037,-3.453534 z m 9.881568,40.86181 a 10.591681,10.600847 0 1 1 2.510398,-7.697876 10.571678,10.580826 0 0 1 -2.480393,7.697876 z m 25.654071,-3.753841 a 2.4403873,2.4424992 0 0 1 -4.200667,-1.831874 2.4103825,2.4124684 0 0 1 0.670107,-1.551588 2.4403873,2.4424992 0 0 1 4.200666,1.831875 2.4103825,2.4124684 0 0 1 -0.640101,1.551587 z"/>
 </svg>
diff --git a/scss/modules/_loader.scss b/scss/modules/_loader.scss
index a780a85..2876a79 100644
--- a/scss/modules/_loader.scss
+++ b/scss/modules/_loader.scss
@@ -5,19 +5,3 @@
   margin: 30vh auto;
   text-align: center;
 }
-
-.spinner {
-  path {
-    &:first-of-type {
-      animation: 1s spinner ease-in-out infinite alternate;
-      opacity: 1;
-    }
-  }
-}
-
-@keyframes spinner {
-  to {
-    filter: grayscale(.8);
-    opacity: .2;
-  }
-}