From dad6a53890c0e25b9b32da25ba6e50b7d7fe16e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ebu=20=28=E3=81=88=E3=81=B6=29?= <eburairu@gmail.com>
Date: Thu, 31 Mar 2022 03:42:13 +0900
Subject: [PATCH] feat(ui): Add new loading pattern logo (#4369)

---
 .../src/images/datahub-logo-color-fadein.svg  |  68 ++++++++++++
 .../datahub-logo-color-loading_chaos.svg      |  72 +++++++++++++
 .../datahub-logo-color-loading_hooks.svg      |  68 ++++++++++++
 .../datahub-logo-color-loading_over.svg       |  68 ++++++++++++
 .../datahub-logo-color-loading_pendulum.svg   |  90 +++++++++-------
 .../datahub-logo-color-loading_satellite.svg  | 100 ++++++++++--------
 .../datahub-logo-color-loading_simple.svg     |  62 +++++++++++
 .../src/images/datahub-logo-color-popup.svg   |  69 ++++++++++++
 .../src/images/datahub-logo-color-stable.svg  |  66 ++++++++++++
 9 files changed, 575 insertions(+), 88 deletions(-)
 create mode 100644 datahub-web-react/src/images/datahub-logo-color-fadein.svg
 create mode 100644 datahub-web-react/src/images/datahub-logo-color-loading_chaos.svg
 create mode 100644 datahub-web-react/src/images/datahub-logo-color-loading_hooks.svg
 create mode 100644 datahub-web-react/src/images/datahub-logo-color-loading_over.svg
 create mode 100644 datahub-web-react/src/images/datahub-logo-color-loading_simple.svg
 create mode 100644 datahub-web-react/src/images/datahub-logo-color-popup.svg
 create mode 100644 datahub-web-react/src/images/datahub-logo-color-stable.svg

diff --git a/datahub-web-react/src/images/datahub-logo-color-fadein.svg b/datahub-web-react/src/images/datahub-logo-color-fadein.svg
new file mode 100644
index 0000000000..2d634fa606
--- /dev/null
+++ b/datahub-web-react/src/images/datahub-logo-color-fadein.svg
@@ -0,0 +1,68 @@
+<svg id="datahub-logo-color_v2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 180 180" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+    <defs>
+        <linearGradient id="red_gradient" x1="83.06" y1="68.88" x2="98.74" y2="40.67" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#dd3163"/>
+            <stop offset="1" stop-color="#ff5663"/>
+        </linearGradient>
+        <linearGradient id="yellow_gradient" x1="91.08" y1="126.64" x2="35.79" y2="50.66" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#efab00"/>
+            <stop offset="1" stop-color="#efb700"/>
+        </linearGradient>
+        <linearGradient id="blue_gradient" x1="50.22" y1="96.82" x2="144.42" y2="17.17" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#1890ff"/>
+            <stop offset="1" stop-color="#18b5ff"/>
+        </linearGradient>
+
+        <mask id="red_mask">
+            <circle r="34" fill="white"/>
+            <circle r="26" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(170)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(280)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(225)" fill="black"/>
+            <g id="red_mask_cap">
+                <circle cy="-30" r="4" transform="rotate(10)" fill="white"/>
+                <circle cy="-30" r="4" transform="rotate(170)" fill="white"/>
+            </g>
+        </mask>
+        <mask id="yellow_mask">
+            <circle r="49" fill="white"/>
+            <circle r="41" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(20)" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(70)" fill="black"/>
+            <circle cy="-45" r="4" transform="rotate(20)" fill="white"/>
+            <circle cy="-45" r="4" transform="rotate(160)" fill="white"/>
+        </mask>
+        <mask id="blue_mask">
+            <circle r="64" fill="white"/>
+            <circle r="56" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(275)" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(220)" fill="black"/>
+            <circle cy="-60" r="4" transform="rotate(5)" fill="white"/>
+            <circle cy="-60" r="4" transform="rotate(220)" fill="white"/>
+        </mask>
+    </defs>
+
+    <g id="logo" transform="translate(90,90)">
+        <animate attributeName="opacity" values="0;1"
+                 calcMode="spline" keySplines="0.25 0.1 0.25 1.0" dur="2s"/>
+
+        <g id="red" fill="url(#red_gradient)">
+            <circle id="red_arc" r="34" mask="url(#red_mask)"/>
+        </g>
+
+        <g id="yellow" fill="url(#yellow_gradient)">
+            <rect id="yellow_joint" x="-4" y="45" width="8" height="35" transform="rotate(57)"/>
+            <circle id="yellow_arc" r="49" mask="url(#yellow_mask)"/>
+            <circle cy="80" r="4" transform="rotate(57)"/>
+            <circle id="yellow_satellite" cy="80" r="10" transform="rotate(57)"/>
+        </g>
+
+        <g id="blue" fill="url(#blue_gradient)">
+            <rect id="blue_joint" x="-4" y="-80" width="8" height="20" transform="rotate(57)"/>
+            <circle id="blue_arc" r="64" mask="url(#blue_mask)"/>
+            <circle cy="-80" r="4" transform="rotate(57)"/>
+            <circle id="blue_satellite" cy="-80" r="10" transform="rotate(57)"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/datahub-web-react/src/images/datahub-logo-color-loading_chaos.svg b/datahub-web-react/src/images/datahub-logo-color-loading_chaos.svg
new file mode 100644
index 0000000000..7c2b9b358c
--- /dev/null
+++ b/datahub-web-react/src/images/datahub-logo-color-loading_chaos.svg
@@ -0,0 +1,72 @@
+<svg id="datahub-logo-color_loading_panic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 180 180" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+    <defs>
+        <linearGradient id="red_gradient" x1="83.06" y1="68.88" x2="98.74" y2="40.67" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#dd3163"/>
+            <stop offset="1" stop-color="#ff5663"/>
+        </linearGradient>
+        <linearGradient id="yellow_gradient" x1="91.08" y1="126.64" x2="35.79" y2="50.66" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#efab00"/>
+            <stop offset="1" stop-color="#efb700"/>
+        </linearGradient>
+        <linearGradient id="blue_gradient" x1="50.22" y1="96.82" x2="144.42" y2="17.17" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#1890ff"/>
+            <stop offset="1" stop-color="#18b5ff"/>
+        </linearGradient>
+
+        <mask id="red_mask">
+            <circle r="34" fill="white"/>
+            <circle r="26" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(170)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(280)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(225)" fill="black"/>
+            <g id="red_mask_cap">
+                <circle cy="-30" r="4" transform="rotate(10)" fill="white"/>
+                <circle cy="-30" r="4" transform="rotate(170)" fill="white"/>
+            </g>
+        </mask>
+        <mask id="yellow_mask">
+            <circle r="49" fill="white"/>
+            <circle r="41" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(20)" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(70)" fill="black"/>
+            <circle cy="-45" r="4" transform="rotate(20)" fill="white"/>
+            <circle cy="-45" r="4" transform="rotate(160)" fill="white"/>
+        </mask>
+        <mask id="blue_mask">
+            <circle r="64" fill="white"/>
+            <circle r="56" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(275)" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(220)" fill="black"/>
+            <circle cy="-60" r="4" transform="rotate(5)" fill="white"/>
+            <circle cy="-60" r="4" transform="rotate(220)" fill="white"/>
+        </mask>
+    </defs>
+
+    <g id="logo" transform="translate(90,90)">
+        <g id="red" fill="url(#red_gradient)">
+            <circle id="red_arc" r="34" mask="url(#red_mask)"/>
+            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="0.5s" repeatCount="indefinite"/>
+        </g>
+
+        <g id="yellow" fill="url(#yellow_gradient)">
+            <rect id="yellow_joint" x="-4" y="45" width="8" height="35" transform="rotate(57)"/>
+            <circle id="yellow_arc" r="49" mask="url(#yellow_mask)"/>
+            <circle cy="80" r="4" transform="rotate(57)"/>
+            <circle id="yellow_satellite" cy="80" r="10" transform="rotate(57)">
+                <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="4s" repeatCount="indefinite"/>
+            </circle>
+            <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="2s" repeatCount="indefinite"/>
+        </g>
+
+        <g id="blue" fill="url(#blue_gradient)">
+            <rect id="blue_joint" x="-4" y="-80" width="8" height="20" transform="rotate(57)"/>
+            <circle id="blue_arc" r="64" mask="url(#blue_mask)"/>
+            <circle cy="-80" r="4" transform="rotate(57)"/>
+            <circle id="blue_satellite" cy="-80" r="10" transform="rotate(57)">
+                <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="1s" repeatCount="indefinite"/>
+            </circle>
+            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="2s" repeatCount="indefinite"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/datahub-web-react/src/images/datahub-logo-color-loading_hooks.svg b/datahub-web-react/src/images/datahub-logo-color-loading_hooks.svg
new file mode 100644
index 0000000000..89b2a5df8b
--- /dev/null
+++ b/datahub-web-react/src/images/datahub-logo-color-loading_hooks.svg
@@ -0,0 +1,68 @@
+<svg id="datahub-logo-color_v2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 180 180" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+    <defs>
+        <linearGradient id="red_gradient" x1="83.06" y1="68.88" x2="98.74" y2="40.67" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#dd3163"/>
+            <stop offset="1" stop-color="#ff5663"/>
+        </linearGradient>
+        <linearGradient id="yellow_gradient" x1="91.08" y1="126.64" x2="35.79" y2="50.66" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#efab00"/>
+            <stop offset="1" stop-color="#efb700"/>
+        </linearGradient>
+        <linearGradient id="blue_gradient" x1="50.22" y1="96.82" x2="144.42" y2="17.17" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#1890ff"/>
+            <stop offset="1" stop-color="#18b5ff"/>
+        </linearGradient>
+
+        <mask id="red_mask">
+            <circle r="34" fill="white"/>
+            <circle r="26" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(170)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(280)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(225)" fill="black"/>
+            <g id="red_mask_cap">
+                <circle cy="-30" r="4" transform="rotate(10)" fill="white"/>
+                <circle cy="-30" r="4" transform="rotate(170)" fill="white"/>
+            </g>
+        </mask>
+        <mask id="yellow_mask">
+            <circle r="49" fill="white"/>
+            <circle r="41" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(20)" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(70)" fill="black"/>
+            <circle cy="-45" r="4" transform="rotate(20)" fill="white"/>
+            <circle cy="-45" r="4" transform="rotate(160)" fill="white"/>
+        </mask>
+        <mask id="blue_mask">
+            <circle r="64" fill="white"/>
+            <circle r="56" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(275)" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(220)" fill="black"/>
+            <circle cy="-60" r="4" transform="rotate(5)" fill="white"/>
+            <circle cy="-60" r="4" transform="rotate(220)" fill="white"/>
+        </mask>
+    </defs>
+
+    <g id="logo" transform="translate(90,90)">
+        <g id="red" fill="url(#red_gradient)">
+            <circle id="red_arc" r="34" mask="url(#red_mask)"/>
+            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="0.5s" repeatCount="indefinite"/>
+        </g>
+
+        <g id="yellow" fill="url(#yellow_gradient)">
+            <rect id="yellow_joint" x="-4" y="45" width="8" height="35" transform="rotate(57)"/>
+            <circle id="yellow_arc" r="49" mask="url(#yellow_mask)"/>
+            <circle cy="80" r="4" transform="rotate(57)"/>
+            <circle id="yellow_satellite" cy="80" r="10" transform="rotate(57)"/>
+            <animateTransform attributeName="transform" type="rotate" values="0 -67 43; 360 -67 43; 360 -67 43" dur="4s" repeatCount="indefinite"/>
+        </g>
+
+        <g id="blue" fill="url(#blue_gradient)">
+            <rect id="blue_joint" x="-4" y="-80" width="8" height="20" transform="rotate(57)"/>
+            <circle id="blue_arc" r="64" mask="url(#blue_mask)"/>
+            <circle cy="-80" r="4" transform="rotate(57)"/>
+            <circle id="blue_satellite" cy="-80" r="10" transform="rotate(57)"/>
+            <animateTransform attributeName="transform" type="rotate" values="0 67 -43; 360 67 -43; 360 67 -43" dur="4s" repeatCount="indefinite"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/datahub-web-react/src/images/datahub-logo-color-loading_over.svg b/datahub-web-react/src/images/datahub-logo-color-loading_over.svg
new file mode 100644
index 0000000000..52f15dada4
--- /dev/null
+++ b/datahub-web-react/src/images/datahub-logo-color-loading_over.svg
@@ -0,0 +1,68 @@
+<svg id="datahub-logo-color_loading_panic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 180 180" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+    <defs>
+        <linearGradient id="red_gradient" x1="83.06" y1="68.88" x2="98.74" y2="40.67" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#dd3163"/>
+            <stop offset="1" stop-color="#ff5663"/>
+        </linearGradient>
+        <linearGradient id="yellow_gradient" x1="91.08" y1="126.64" x2="35.79" y2="50.66" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#efab00"/>
+            <stop offset="1" stop-color="#efb700"/>
+        </linearGradient>
+        <linearGradient id="blue_gradient" x1="50.22" y1="96.82" x2="144.42" y2="17.17" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#1890ff"/>
+            <stop offset="1" stop-color="#18b5ff"/>
+        </linearGradient>
+
+        <mask id="red_mask">
+            <circle r="34" fill="white"/>
+            <circle r="26" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(170)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(280)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(225)" fill="black"/>
+            <g id="red_mask_cap">
+                <circle cy="-30" r="4" transform="rotate(10)" fill="white"/>
+                <circle cy="-30" r="4" transform="rotate(170)" fill="white"/>
+            </g>
+        </mask>
+        <mask id="yellow_mask">
+            <circle r="49" fill="white"/>
+            <circle r="41" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(20)" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(70)" fill="black"/>
+            <circle cy="-45" r="4" transform="rotate(20)" fill="white"/>
+            <circle cy="-45" r="4" transform="rotate(160)" fill="white"/>
+        </mask>
+        <mask id="blue_mask">
+            <circle r="64" fill="white"/>
+            <circle r="56" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(275)" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(220)" fill="black"/>
+            <circle cy="-60" r="4" transform="rotate(5)" fill="white"/>
+            <circle cy="-60" r="4" transform="rotate(220)" fill="white"/>
+        </mask>
+    </defs>
+
+    <g id="logo" transform="translate(90,90)">
+        <g id="red" fill="url(#red_gradient)">
+            <circle id="red_arc" r="34" mask="url(#red_mask)"/>
+            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"/>
+            <animateTransform attributeName="transform" type="scale" values="1;2;1" calcMode="spline"
+                              keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" dur="3s" repeatCount="indefinite" additive="sum"/>
+        </g>
+
+        <g id="yellow" fill="url(#yellow_gradient)">
+            <circle id="yellow_arc" r="49" mask="url(#yellow_mask)"/>
+            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="2s" repeatCount="indefinite"/>
+            <animateTransform attributeName="transform" type="scale" values="1;1.33;1" calcMode="spline"
+                              keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" dur="2s" repeatCount="indefinite" additive="sum"/>
+        </g>
+
+        <g id="blue" fill="url(#blue_gradient)">
+            <circle id="blue_arc" r="64" mask="url(#blue_mask)"/>
+            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1s" repeatCount="indefinite"/>
+            <animateTransform attributeName="transform" type="scale" values="1;0.5;1" calcMode="spline"
+                              keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" dur="3s" repeatCount="indefinite" additive="sum"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/datahub-web-react/src/images/datahub-logo-color-loading_pendulum.svg b/datahub-web-react/src/images/datahub-logo-color-loading_pendulum.svg
index 9790886601..e40ebb0a77 100644
--- a/datahub-web-react/src/images/datahub-logo-color-loading_pendulum.svg
+++ b/datahub-web-react/src/images/datahub-logo-color-loading_pendulum.svg
@@ -2,62 +2,70 @@
     viewBox="0 0 180 180" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
     <defs>
         <linearGradient id="red_gradient" x1="83.06" y1="68.88" x2="98.74" y2="40.67" gradientUnits="userSpaceOnUse">
-            <stop offset="0" stop-color="#dd3163" />
-            <stop offset="1" stop-color="#ff5663" />
+            <stop offset="0" stop-color="#dd3163"/>
+            <stop offset="1" stop-color="#ff5663"/>
         </linearGradient>
         <linearGradient id="yellow_gradient" x1="91.08" y1="126.64" x2="35.79" y2="50.66" gradientUnits="userSpaceOnUse">
-            <stop offset="0" stop-color="#efab00" />
-            <stop offset="1" stop-color="#efb700" />
+            <stop offset="0" stop-color="#efab00"/>
+            <stop offset="1" stop-color="#efb700"/>
         </linearGradient>
         <linearGradient id="blue_gradient" x1="50.22" y1="96.82" x2="144.42" y2="17.17" gradientUnits="userSpaceOnUse">
-            <stop offset="0.03" stop-color="#1890ff" />
-            <stop offset="1" stop-color="#18b5ff" />
+            <stop offset="0" stop-color="#1890ff"/>
+            <stop offset="1" stop-color="#18b5ff"/>
         </linearGradient>
 
         <mask id="red_mask">
-            <circle cx="90" cy="90" r="34" fill="white" />
-            <circle cx="90" cy="90" r="26" fill="black" />
-            <rect width="34" height="68" x="56" y="56" fill="black" />
-            <circle cx="90" cy="60" r="4" fill="white" />
-            <circle cx="90" cy="120" r="4" fill="white" />
+            <circle r="34" fill="white"/>
+            <circle r="26" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(170)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(280)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(225)" fill="black"/>
+            <g id="red_mask_cap">
+                <circle cy="-30" r="4" transform="rotate(10)" fill="white"/>
+                <circle cy="-30" r="4" transform="rotate(170)" fill="white"/>
+            </g>
         </mask>
         <mask id="yellow_mask">
-            <circle cx="90" cy="90" r="49" fill="white" />
-            <circle cx="90" cy="90" r="41" fill="black" />
-            <rect width="49" height="49" x="90" y="41" transform="rotate(18 90 90)" fill="black" />
-            <rect width="49" height="49" x="90" y="41" transform="rotate(72 90 90)" fill="black" />
-            <circle cx="90" cy="45" r="4" transform="rotate(18 90 90)" fill="white" />
-            <circle cx="90" cy="45" r="4" transform="rotate(162 90 90)" fill="white" />
+            <circle r="49" fill="white"/>
+            <circle r="41" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(20)" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(70)" fill="black"/>
+            <circle cy="-45" r="4" transform="rotate(20)" fill="white"/>
+            <circle cy="-45" r="4" transform="rotate(160)" fill="white"/>
         </mask>
         <mask id="blue_mask">
-            <circle cx="90" cy="90" r="64" fill="white" />
-            <circle cx="90" cy="90" r="56" fill="black" />
-            <rect width="64" height="64" x="90" y="26" transform="rotate(270 90 90)" fill="black" />
-            <rect width="64" height="64" x="90" y="26" transform="rotate(216 90 90)" fill="black" />
-            <circle cx="90" cy="30" r="4" fill="white" />
-            <circle cx="90" cy="30" r="4" transform="rotate(216 90 90)" fill="white" />
+            <circle r="64" fill="white"/>
+            <circle r="56" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(275)" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(220)" fill="black"/>
+            <circle cy="-60" r="4" transform="rotate(5)" fill="white"/>
+            <circle cy="-60" r="4" transform="rotate(220)" fill="white"/>
         </mask>
     </defs>
 
-    <g id="red" fill="url(#red_gradient)">
-        <circle id="red_arc" cx="90" cy="90" r="34" mask="url(#red_mask)"/>
-        <animateTransform attributeName="transform" type="rotate" from="0 90 90" to="360 90 90" dur="1s"
-            repeatCount="indefinite" />
-    </g>
+    <g id="logo" transform="translate(90,90)">
+        <g id="red" fill="url(#red_gradient)">
+            <circle id="red_arc" r="34" mask="url(#red_mask)"/>
+            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1s"
+                repeatCount="indefinite" />
+        </g>
 
-    <g id="yellow" fill="url(#yellow_gradient)">
-        <rect id="yellow_joint" width="8" height="35" x="86" y="135" transform="rotate(60 90 90)"/>
-        <circle id="yellow_arc" cx="90" cy="90" r="49" mask="url(#yellow_mask)"/>
-        <circle id="yellow_satellite" cx="90" cy="170" r="10" transform="rotate(60 90 90)" />
-        <animateTransform attributeName="transform" type="rotate" values="-10 90 90; 80 90 90; -10 90 90" calcMode="spline" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" dur="2s"
-            repeatCount="indefinite" />
-    </g>
+        <g id="yellow" fill="url(#yellow_gradient)">
+            <rect id="yellow_joint" x="-4" y="45" width="8" height="35" transform="rotate(57)"/>
+            <circle id="yellow_arc" r="49" mask="url(#yellow_mask)"/>
+            <circle cy="80" r="4" transform="rotate(57)"/>
+            <circle id="yellow_satellite" cy="80" r="10" transform="rotate(57)"/>
+            <animateTransform attributeName="transform" type="rotate" values="-5; 80; -5" calcMode="spline" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" dur="2s"
+                              repeatCount="indefinite" />
+        </g>
 
-    <g id="blue" fill="url(#blue_gradient)">
-        <rect id="blue_joint" width="8" height="20" x="86" y="10" transform="rotate(60 90 90)"/>
-        <circle cx="90" cy="90" r="64" mask="url(#blue_mask)"/>
-        <circle id="blue_satellite" cx="90" cy="10" r="10" transform="rotate(60 90 90)" />
-        <animateTransform attributeName="transform" type="rotate" values="0 90 90; -30 90 90; 0 90 90" keyTimes="0; 0.1; 1" dur="6s"
-            repeatCount="indefinite" />
+        <g id="blue" fill="url(#blue_gradient)">
+            <rect id="blue_joint" x="-4" y="-80" width="8" height="20" transform="rotate(57)"/>
+            <circle id="blue_arc" r="64" mask="url(#blue_mask)"/>
+            <circle cy="-80" r="4" transform="rotate(57)"/>
+            <circle id="blue_satellite" cy="-80" r="10" transform="rotate(57)"/>
+            <animateTransform attributeName="transform" type="rotate" values="0; -35; 0" keyTimes="0; 0.1; 1" dur="6s"
+                              repeatCount="indefinite" />
+        </g>
     </g>
 </svg>
\ No newline at end of file
diff --git a/datahub-web-react/src/images/datahub-logo-color-loading_satellite.svg b/datahub-web-react/src/images/datahub-logo-color-loading_satellite.svg
index dc14931c5d..a6e8c5cbc3 100644
--- a/datahub-web-react/src/images/datahub-logo-color-loading_satellite.svg
+++ b/datahub-web-react/src/images/datahub-logo-color-loading_satellite.svg
@@ -2,68 +2,74 @@
     viewBox="0 0 180 180" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
     <defs>
         <linearGradient id="red_gradient" x1="83.06" y1="68.88" x2="98.74" y2="40.67" gradientUnits="userSpaceOnUse">
-            <stop offset="0" stop-color="#dd3163" />
-            <stop offset="1" stop-color="#ff5663" />
+            <stop offset="0" stop-color="#dd3163"/>
+            <stop offset="1" stop-color="#ff5663"/>
         </linearGradient>
         <linearGradient id="yellow_gradient" x1="91.08" y1="126.64" x2="35.79" y2="50.66" gradientUnits="userSpaceOnUse">
-            <stop offset="0" stop-color="#efab00" />
-            <stop offset="1" stop-color="#efb700" />
+            <stop offset="0" stop-color="#efab00"/>
+            <stop offset="1" stop-color="#efb700"/>
         </linearGradient>
         <linearGradient id="blue_gradient" x1="50.22" y1="96.82" x2="144.42" y2="17.17" gradientUnits="userSpaceOnUse">
-            <stop offset="0.03" stop-color="#1890ff" />
-            <stop offset="1" stop-color="#18b5ff" />
+            <stop offset="0" stop-color="#1890ff"/>
+            <stop offset="1" stop-color="#18b5ff"/>
         </linearGradient>
 
         <mask id="red_mask">
-            <circle cx="90" cy="90" r="34" fill="white" />
-            <circle cx="90" cy="90" r="26" fill="black" />
-            <rect width="34" height="68" x="56" y="56" fill="black" />
-            <circle cx="90" cy="60" r="4" fill="white" />
-            <circle cx="90" cy="120" r="4" fill="white" />
+            <circle r="34" fill="white"/>
+            <circle r="26" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(170)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(280)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(225)" fill="black"/>
+            <g id="red_mask_cap">
+                <circle cy="-30" r="4" transform="rotate(10)" fill="white"/>
+                <circle cy="-30" r="4" transform="rotate(170)" fill="white"/>
+            </g>
         </mask>
         <mask id="yellow_mask">
-            <circle cx="90" cy="90" r="49" fill="white" />
-            <circle cx="90" cy="90" r="41" fill="black" />
-            <rect width="49" height="49" x="90" y="41" transform="rotate(18 90 90)" fill="black" />
-            <rect width="49" height="49" x="90" y="41" transform="rotate(72 90 90)" fill="black" />
-            <circle cx="90" cy="45" r="4" transform="rotate(18 90 90)" fill="white" />
-            <circle cx="90" cy="45" r="4" transform="rotate(162 90 90)" fill="white" />
+            <circle r="49" fill="white"/>
+            <circle r="41" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(20)" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(70)" fill="black"/>
+            <circle cy="-45" r="4" transform="rotate(20)" fill="white"/>
+            <circle cy="-45" r="4" transform="rotate(160)" fill="white"/>
         </mask>
         <mask id="blue_mask">
-            <circle cx="90" cy="90" r="64" fill="white" />
-            <circle cx="90" cy="90" r="56" fill="black" />
-            <rect width="64" height="64" x="90" y="26" transform="rotate(270 90 90)" fill="black" />
-            <rect width="64" height="64" x="90" y="26" transform="rotate(216 90 90)" fill="black" />
-            <circle cx="90" cy="30" r="4" fill="white" />
-            <circle cx="90" cy="30" r="4" transform="rotate(216 90 90)" fill="white" />
+            <circle r="64" fill="white"/>
+            <circle r="56" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(275)" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(220)" fill="black"/>
+            <circle cy="-60" r="4" transform="rotate(5)" fill="white"/>
+            <circle cy="-60" r="4" transform="rotate(220)" fill="white"/>
         </mask>
     </defs>
 
-    <g id="red" fill="url(#red_gradient)">
-        <circle id="red_arc" cx="90" cy="90" r="34" mask="url(#red_mask)"/>
-        <animateTransform attributeName="transform" type="rotate" from="0 90 90" to="360 90 90" dur="1s"
-            repeatCount="indefinite" />
-    </g>
+    <g id="logo" transform="translate(90,90)">
+        <g id="red" fill="url(#red_gradient)">
+            <circle id="red_arc" r="34" mask="url(#red_mask)"/>
+            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1s"
+                              repeatCount="indefinite" />
+        </g>
 
-    <g id="yellow" fill="url(#yellow_gradient)">
-        <rect id="yellow_joint" width="8" height="35" x="86" y="135" transform="rotate(60 90 90)"/>
-        <circle id="yellow_arc" cx="90" cy="90" r="49" mask="url(#yellow_mask)"/>
-        <circle id="yellow_satellite" cx="90" cy="170" r="10" transform="rotate(60 90 90)" >
-            <animateTransform attributeName="transform" type="rotate" dur="4s" fill="freeze" 
-                              values="420 90 90;420 90 90; 60 90 90" keyTimes="0; 0.1; 1" calcMode="spline" 
-                              keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" repeatCount="indefinite" />
-        </circle>
-        <circle cx="90" cy="170" r="4" transform="rotate(60 90 90)" />
-    </g>
+        <g id="yellow" fill="url(#yellow_gradient)">
+            <rect id="yellow_joint" x="-4" y="45" width="8" height="35" transform="rotate(57)"/>
+            <circle id="yellow_arc" r="49" mask="url(#yellow_mask)"/>
+            <circle cy="80" r="4" transform="rotate(57)"/>
+            <circle id="yellow_satellite" cy="80" r="10" transform="rotate(57)">
+                <animateTransform attributeName="transform" type="rotate" dur="4s" fill="freeze" 
+                                  values="417;417; 57" keyTimes="0; 0.1; 1" calcMode="spline" 
+                                  keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" repeatCount="indefinite" />
+            </circle>
+        </g>
 
-    <g id="blue" fill="url(#blue_gradient)">
-        <rect id="blue_joint" width="8" height="20" x="86" y="10" transform="rotate(60 90 90)"/>
-        <circle cx="90" cy="90" r="64" mask="url(#blue_mask)"/>
-        <circle id="blue_satellite" cx="90" cy="10" r="10" transform="rotate(60 90 90)" >
-            <animateTransform attributeName="transform" type="rotate" dur="4s" fill="freeze" 
-                              values="60 90 90;60 90 90; 780 90 90" keyTimes="0; 0.1; 1" 
-                              calcMode="spline" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" repeatCount="indefinite" />
-        </circle>
-        <circle cx="90" cy="10" r="4" transform="rotate(60 90 90)" />
+        <g id="blue" fill="url(#blue_gradient)">
+            <rect id="blue_joint" x="-4" y="-80" width="8" height="20" transform="rotate(57)"/>
+            <circle id="blue_arc" r="64" mask="url(#blue_mask)"/>
+            <circle cy="-80" r="4" transform="rotate(57)"/>
+            <circle id="blue_satellite" cy="-80" r="10" transform="rotate(57)">
+                <animateTransform attributeName="transform" type="rotate" dur="4s" fill="freeze" 
+                                  values="57;57; 777" keyTimes="0; 0.1; 1" 
+                                  calcMode="spline" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" repeatCount="indefinite" />
+            </circle>
+        </g>
     </g>
 </svg>
\ No newline at end of file
diff --git a/datahub-web-react/src/images/datahub-logo-color-loading_simple.svg b/datahub-web-react/src/images/datahub-logo-color-loading_simple.svg
new file mode 100644
index 0000000000..bafe7348e6
--- /dev/null
+++ b/datahub-web-react/src/images/datahub-logo-color-loading_simple.svg
@@ -0,0 +1,62 @@
+<svg id="datahub-logo-color_loading_panic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 180 180" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+    <defs>
+        <linearGradient id="red_gradient" x1="83.06" y1="68.88" x2="98.74" y2="40.67" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#dd3163"/>
+            <stop offset="1" stop-color="#ff5663"/>
+        </linearGradient>
+        <linearGradient id="yellow_gradient" x1="91.08" y1="126.64" x2="35.79" y2="50.66" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#efab00"/>
+            <stop offset="1" stop-color="#efb700"/>
+        </linearGradient>
+        <linearGradient id="blue_gradient" x1="50.22" y1="96.82" x2="144.42" y2="17.17" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#1890ff"/>
+            <stop offset="1" stop-color="#18b5ff"/>
+        </linearGradient>
+
+        <mask id="red_mask">
+            <circle r="34" fill="white"/>
+            <circle r="26" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(170)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(280)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(225)" fill="black"/>
+            <g id="red_mask_cap">
+                <circle cy="-30" r="4" transform="rotate(10)" fill="white"/>
+                <circle cy="-30" r="4" transform="rotate(170)" fill="white"/>
+            </g>
+        </mask>
+        <mask id="yellow_mask">
+            <circle r="49" fill="white"/>
+            <circle r="41" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(20)" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(70)" fill="black"/>
+            <circle cy="-45" r="4" transform="rotate(20)" fill="white"/>
+            <circle cy="-45" r="4" transform="rotate(160)" fill="white"/>
+        </mask>
+        <mask id="blue_mask">
+            <circle r="64" fill="white"/>
+            <circle r="56" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(275)" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(220)" fill="black"/>
+            <circle cy="-60" r="4" transform="rotate(5)" fill="white"/>
+            <circle cy="-60" r="4" transform="rotate(220)" fill="white"/>
+        </mask>
+    </defs>
+
+    <g id="logo" transform="translate(90,90)">
+        <g id="red" fill="url(#red_gradient)">
+            <circle id="red_arc" r="34" mask="url(#red_mask)"/>
+            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="0.5s" repeatCount="indefinite"/>
+        </g>
+
+        <g id="yellow" fill="url(#yellow_gradient)">
+            <circle id="yellow_arc" r="49" mask="url(#yellow_mask)"/>
+            <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="3s" repeatCount="indefinite"/>
+        </g>
+
+        <g id="blue" fill="url(#blue_gradient)">
+            <circle id="blue_arc" r="64" mask="url(#blue_mask)"/>
+            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="2s" repeatCount="indefinite"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/datahub-web-react/src/images/datahub-logo-color-popup.svg b/datahub-web-react/src/images/datahub-logo-color-popup.svg
new file mode 100644
index 0000000000..248a01d680
--- /dev/null
+++ b/datahub-web-react/src/images/datahub-logo-color-popup.svg
@@ -0,0 +1,69 @@
+<svg id="datahub-logo-color_v2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 180 180" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+    <defs>
+        <linearGradient id="red_gradient" x1="83.06" y1="68.88" x2="98.74" y2="40.67" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#dd3163"/>
+            <stop offset="1" stop-color="#ff5663"/>
+        </linearGradient>
+        <linearGradient id="yellow_gradient" x1="91.08" y1="126.64" x2="35.79" y2="50.66" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#efab00"/>
+            <stop offset="1" stop-color="#efb700"/>
+        </linearGradient>
+        <linearGradient id="blue_gradient" x1="50.22" y1="96.82" x2="144.42" y2="17.17" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#1890ff"/>
+            <stop offset="1" stop-color="#18b5ff"/>
+        </linearGradient>
+
+        <mask id="red_mask">
+            <circle r="34" fill="white"/>
+            <circle r="26" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(170)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(280)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(225)" fill="black"/>
+            <g id="red_mask_cap">
+                <circle cy="-30" r="4" transform="rotate(10)" fill="white"/>
+                <circle cy="-30" r="4" transform="rotate(170)" fill="white"/>
+            </g>
+        </mask>
+        <mask id="yellow_mask">
+            <circle r="49" fill="white"/>
+            <circle r="41" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(20)" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(70)" fill="black"/>
+            <circle cy="-45" r="4" transform="rotate(20)" fill="white"/>
+            <circle cy="-45" r="4" transform="rotate(160)" fill="white"/>
+        </mask>
+        <mask id="blue_mask">
+            <circle r="64" fill="white"/>
+            <circle r="56" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(275)" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(220)" fill="black"/>
+            <circle cy="-60" r="4" transform="rotate(5)" fill="white"/>
+            <circle cy="-60" r="4" transform="rotate(220)" fill="white"/>
+        </mask>
+    </defs>
+
+    <g id="logo" transform="translate(90,90)">
+        <animateTransform attributeName="transform" type="scale" values="0;1" 
+                          calcMode="spline" keySplines="0.25 0.1 0.25 1.0" dur="2s" 
+                          repeatCount="1" additive="sum"/>
+
+        <g id="red" fill="url(#red_gradient)">
+            <circle id="red_arc" r="34" mask="url(#red_mask)"/>
+        </g>
+
+        <g id="yellow" fill="url(#yellow_gradient)">
+            <rect id="yellow_joint" x="-4" y="45" width="8" height="35" transform="rotate(57)"/>
+            <circle id="yellow_arc" r="49" mask="url(#yellow_mask)"/>
+            <circle cy="80" r="4" transform="rotate(57)"/>
+            <circle id="yellow_satellite" cy="80" r="10" transform="rotate(57)"/>
+        </g>
+
+        <g id="blue" fill="url(#blue_gradient)">
+            <rect id="blue_joint" x="-4" y="-80" width="8" height="20" transform="rotate(57)"/>
+            <circle id="blue_arc" r="64" mask="url(#blue_mask)"/>
+            <circle cy="-80" r="4" transform="rotate(57)"/>
+            <circle id="blue_satellite" cy="-80" r="10" transform="rotate(57)"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/datahub-web-react/src/images/datahub-logo-color-stable.svg b/datahub-web-react/src/images/datahub-logo-color-stable.svg
new file mode 100644
index 0000000000..6cff7333af
--- /dev/null
+++ b/datahub-web-react/src/images/datahub-logo-color-stable.svg
@@ -0,0 +1,66 @@
+<svg id="datahub-logo-color_v2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 180 180" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+    <defs>
+        <linearGradient id="red_gradient" x1="83.06" y1="68.88" x2="98.74" y2="40.67" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#dd3163"/>
+            <stop offset="1" stop-color="#ff5663"/>
+        </linearGradient>
+        <linearGradient id="yellow_gradient" x1="91.08" y1="126.64" x2="35.79" y2="50.66" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#efab00"/>
+            <stop offset="1" stop-color="#efb700"/>
+        </linearGradient>
+        <linearGradient id="blue_gradient" x1="50.22" y1="96.82" x2="144.42" y2="17.17" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#1890ff"/>
+            <stop offset="1" stop-color="#18b5ff"/>
+        </linearGradient>
+
+        <mask id="red_mask">
+            <circle r="34" fill="white"/>
+            <circle r="26" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(170)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(280)" fill="black"/>
+            <rect y="-34" width="34" height="34" transform="rotate(225)" fill="black"/>
+            <g id="red_mask_cap">
+                <circle cy="-30" r="4" transform="rotate(10)" fill="white"/>
+                <circle cy="-30" r="4" transform="rotate(170)" fill="white"/>
+            </g>
+        </mask>
+        <mask id="yellow_mask">
+            <circle r="49" fill="white"/>
+            <circle r="41" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(20)" fill="black"/>
+            <rect y="-49" width="49" height="49" transform="rotate(70)" fill="black"/>
+            <circle cy="-45" r="4" transform="rotate(20)" fill="white"/>
+            <circle cy="-45" r="4" transform="rotate(160)" fill="white"/>
+        </mask>
+        <mask id="blue_mask">
+            <circle r="64" fill="white"/>
+            <circle r="56" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(275)" fill="black"/>
+            <rect y="-64" width="64" height="64" transform="rotate(220)" fill="black"/>
+            <circle cy="-60" r="4" transform="rotate(5)" fill="white"/>
+            <circle cy="-60" r="4" transform="rotate(220)" fill="white"/>
+        </mask>
+    </defs>
+
+    <g id="logo" transform="translate(90,90)">
+        <g id="red" fill="url(#red_gradient)">
+            <circle id="red_arc" r="34" mask="url(#red_mask)"/>
+        </g>
+
+        <g id="yellow" fill="url(#yellow_gradient)">
+            <rect id="yellow_joint" x="-4" y="45" width="8" height="35" transform="rotate(57)"/>
+            <circle id="yellow_arc" r="49" mask="url(#yellow_mask)"/>
+            <circle cy="80" r="4" transform="rotate(57)"/>
+            <circle id="yellow_satellite" cy="80" r="10" transform="rotate(57)"/>
+        </g>
+
+        <g id="blue" fill="url(#blue_gradient)">
+            <rect id="blue_joint" x="-4" y="-80" width="8" height="20" transform="rotate(57)"/>
+            <circle id="blue_arc" r="64" mask="url(#blue_mask)"/>
+            <circle cy="-80" r="4" transform="rotate(57)"/>
+            <circle id="blue_satellite" cy="-80" r="10" transform="rotate(57)"/>
+        </g>
+    </g>
+
+</svg>
\ No newline at end of file