yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-19 06:38:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): Add new loading pattern logo (#4369)

Browse Source
This commit is contained in:
Ebu (えぶ) 2022-03-31 03:42:13 +09:00 committed by GitHub
parent 9cc6d8af32
commit dad6a53890
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 575 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
datahub-web-react/src/images/datahub-logo-color-fadein.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

72
datahub-web-react/src/images/datahub-logo-color-loading_chaos.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

68
datahub-web-react/src/images/datahub-logo-color-loading_hooks.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

68
datahub-web-react/src/images/datahub-logo-color-loading_over.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

64
datahub-web-react/src/images/datahub-logo-color-loading_pendulum.svg
View File

@ -10,54 +10,62 @@
<stop offset="1" stop-color="#efb700"/> <stop offset="1" stop-color="#efb700"/>
</linearGradient> </linearGradient>
<linearGradient id="blue_gradient" x1="50.22" y1="96.82" x2="144.42" y2="17.17" gradientUnits="userSpaceOnUse"> <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="0" stop-color="#1890ff"/>
<stop offset="1" stop-color="#18b5ff"/> <stop offset="1" stop-color="#18b5ff"/>
</linearGradient> </linearGradient>
<mask id="red_mask"> <mask id="red_mask">
<circle cx="90" cy="90" r="34" fill="white" /> <circle r="34" fill="white"/>
<circle cx="90" cy="90" r="26" fill="black" /> <circle r="26" fill="black"/>
<rect width="34" height="68" x="56" y="56" fill="black" /> <rect y="-34" width="34" height="34" transform="rotate(170)" fill="black"/>
<circle cx="90" cy="60" r="4" fill="white" /> <rect y="-34" width="34" height="34" transform="rotate(280)" fill="black"/>
<circle cx="90" cy="120" r="4" fill="white" /> <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>
<mask id="yellow_mask"> <mask id="yellow_mask">
<circle cx="90" cy="90" r="49" fill="white" /> <circle r="49" fill="white"/>
<circle cx="90" cy="90" r="41" fill="black" /> <circle r="41" fill="black"/>
<rect width="49" height="49" x="90" y="41" transform="rotate(18 90 90)" fill="black" /> <rect y="-49" width="49" height="49" transform="rotate(20)" fill="black"/>
<rect width="49" height="49" x="90" y="41" transform="rotate(72 90 90)" fill="black" /> <rect y="-49" width="49" height="49" transform="rotate(70)" fill="black"/>
<circle cx="90" cy="45" r="4" transform="rotate(18 90 90)" fill="white" /> <circle cy="-45" r="4" transform="rotate(20)" fill="white"/>
<circle cx="90" cy="45" r="4" transform="rotate(162 90 90)" fill="white" /> <circle cy="-45" r="4" transform="rotate(160)" fill="white"/>
</mask> </mask>
<mask id="blue_mask"> <mask id="blue_mask">
<circle cx="90" cy="90" r="64" fill="white" /> <circle r="64" fill="white"/>
<circle cx="90" cy="90" r="56" fill="black" /> <circle r="56" fill="black"/>
<rect width="64" height="64" x="90" y="26" transform="rotate(270 90 90)" fill="black" /> <rect y="-64" width="64" height="64" transform="rotate(275)" fill="black"/>
<rect width="64" height="64" x="90" y="26" transform="rotate(216 90 90)" fill="black" /> <rect y="-64" width="64" height="64" transform="rotate(220)" fill="black"/>
<circle cx="90" cy="30" r="4" fill="white" /> <circle cy="-60" r="4" transform="rotate(5)" fill="white"/>
<circle cx="90" cy="30" r="4" transform="rotate(216 90 90)" fill="white" /> <circle cy="-60" r="4" transform="rotate(220)" fill="white"/>
</mask> </mask>
</defs> </defs>
<g id="logo" transform="translate(90,90)">
<g id="red" fill="url(#red_gradient)"> <g id="red" fill="url(#red_gradient)">
<circle id="red_arc" cx="90" cy="90" r="34" mask="url(#red_mask)"/> <circle id="red_arc" r="34" mask="url(#red_mask)"/>
<animateTransform attributeName="transform" type="rotate" from="0 90 90" to="360 90 90" dur="1s" <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1s"
repeatCount="indefinite" /> repeatCount="indefinite" />
</g> </g>
<g id="yellow" fill="url(#yellow_gradient)"> <g id="yellow" fill="url(#yellow_gradient)">
<rect id="yellow_joint" width="8" height="35" x="86" y="135" transform="rotate(60 90 90)"/> <rect id="yellow_joint" x="-4" y="45" width="8" height="35" transform="rotate(57)"/>
<circle id="yellow_arc" cx="90" cy="90" r="49" mask="url(#yellow_mask)"/> <circle id="yellow_arc" r="49" mask="url(#yellow_mask)"/>
<circle id="yellow_satellite" cx="90" cy="170" r="10" transform="rotate(60 90 90)" /> <circle cy="80" r="4" transform="rotate(57)"/>
<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" <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" /> repeatCount="indefinite" />
</g> </g>
<g id="blue" fill="url(#blue_gradient)"> <g id="blue" fill="url(#blue_gradient)">
<rect id="blue_joint" width="8" height="20" x="86" y="10" transform="rotate(60 90 90)"/> <rect id="blue_joint" x="-4" y="-80" width="8" height="20" transform="rotate(57)"/>
<circle cx="90" cy="90" r="64" mask="url(#blue_mask)"/> <circle id="blue_arc" r="64" mask="url(#blue_mask)"/>
<circle id="blue_satellite" cx="90" cy="10" r="10" transform="rotate(60 90 90)" /> <circle cy="-80" r="4" transform="rotate(57)"/>
<animateTransform attributeName="transform" type="rotate" values="0 90 90; -30 90 90; 0 90 90" keyTimes="0; 0.1; 1" dur="6s" <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" /> repeatCount="indefinite" />
</g> </g>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

66
datahub-web-react/src/images/datahub-logo-color-loading_satellite.svg
View File

@ -10,60 +10,66 @@
<stop offset="1" stop-color="#efb700"/> <stop offset="1" stop-color="#efb700"/>
</linearGradient> </linearGradient>
<linearGradient id="blue_gradient" x1="50.22" y1="96.82" x2="144.42" y2="17.17" gradientUnits="userSpaceOnUse"> <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="0" stop-color="#1890ff"/>
<stop offset="1" stop-color="#18b5ff"/> <stop offset="1" stop-color="#18b5ff"/>
</linearGradient> </linearGradient>
<mask id="red_mask"> <mask id="red_mask">
<circle cx="90" cy="90" r="34" fill="white" /> <circle r="34" fill="white"/>
<circle cx="90" cy="90" r="26" fill="black" /> <circle r="26" fill="black"/>
<rect width="34" height="68" x="56" y="56" fill="black" /> <rect y="-34" width="34" height="34" transform="rotate(170)" fill="black"/>
<circle cx="90" cy="60" r="4" fill="white" /> <rect y="-34" width="34" height="34" transform="rotate(280)" fill="black"/>
<circle cx="90" cy="120" r="4" fill="white" /> <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>
<mask id="yellow_mask"> <mask id="yellow_mask">
<circle cx="90" cy="90" r="49" fill="white" /> <circle r="49" fill="white"/>
<circle cx="90" cy="90" r="41" fill="black" /> <circle r="41" fill="black"/>
<rect width="49" height="49" x="90" y="41" transform="rotate(18 90 90)" fill="black" /> <rect y="-49" width="49" height="49" transform="rotate(20)" fill="black"/>
<rect width="49" height="49" x="90" y="41" transform="rotate(72 90 90)" fill="black" /> <rect y="-49" width="49" height="49" transform="rotate(70)" fill="black"/>
<circle cx="90" cy="45" r="4" transform="rotate(18 90 90)" fill="white" /> <circle cy="-45" r="4" transform="rotate(20)" fill="white"/>
<circle cx="90" cy="45" r="4" transform="rotate(162 90 90)" fill="white" /> <circle cy="-45" r="4" transform="rotate(160)" fill="white"/>
</mask> </mask>
<mask id="blue_mask"> <mask id="blue_mask">
<circle cx="90" cy="90" r="64" fill="white" /> <circle r="64" fill="white"/>
<circle cx="90" cy="90" r="56" fill="black" /> <circle r="56" fill="black"/>
<rect width="64" height="64" x="90" y="26" transform="rotate(270 90 90)" fill="black" /> <rect y="-64" width="64" height="64" transform="rotate(275)" fill="black"/>
<rect width="64" height="64" x="90" y="26" transform="rotate(216 90 90)" fill="black" /> <rect y="-64" width="64" height="64" transform="rotate(220)" fill="black"/>
<circle cx="90" cy="30" r="4" fill="white" /> <circle cy="-60" r="4" transform="rotate(5)" fill="white"/>
<circle cx="90" cy="30" r="4" transform="rotate(216 90 90)" fill="white" /> <circle cy="-60" r="4" transform="rotate(220)" fill="white"/>
</mask> </mask>
</defs> </defs>
<g id="logo" transform="translate(90,90)">
<g id="red" fill="url(#red_gradient)"> <g id="red" fill="url(#red_gradient)">
<circle id="red_arc" cx="90" cy="90" r="34" mask="url(#red_mask)"/> <circle id="red_arc" r="34" mask="url(#red_mask)"/>
<animateTransform attributeName="transform" type="rotate" from="0 90 90" to="360 90 90" dur="1s" <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1s"
repeatCount="indefinite" /> repeatCount="indefinite" />
</g> </g>
<g id="yellow" fill="url(#yellow_gradient)"> <g id="yellow" fill="url(#yellow_gradient)">
<rect id="yellow_joint" width="8" height="35" x="86" y="135" transform="rotate(60 90 90)"/> <rect id="yellow_joint" x="-4" y="45" width="8" height="35" transform="rotate(57)"/>
<circle id="yellow_arc" cx="90" cy="90" r="49" mask="url(#yellow_mask)"/> <circle id="yellow_arc" r="49" mask="url(#yellow_mask)"/>
<circle id="yellow_satellite" cx="90" cy="170" r="10" transform="rotate(60 90 90)" > <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" <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" 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" /> keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" repeatCount="indefinite" />
</circle> </circle>
<circle cx="90" cy="170" r="4" transform="rotate(60 90 90)" />
</g> </g>
<g id="blue" fill="url(#blue_gradient)"> <g id="blue" fill="url(#blue_gradient)">
<rect id="blue_joint" width="8" height="20" x="86" y="10" transform="rotate(60 90 90)"/> <rect id="blue_joint" x="-4" y="-80" width="8" height="20" transform="rotate(57)"/>
<circle cx="90" cy="90" r="64" mask="url(#blue_mask)"/> <circle id="blue_arc" r="64" mask="url(#blue_mask)"/>
<circle id="blue_satellite" cx="90" cy="10" r="10" transform="rotate(60 90 90)" > <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" <animateTransform attributeName="transform" type="rotate" dur="4s" fill="freeze"
values="60 90 90;60 90 90; 780 90 90" keyTimes="0; 0.1; 1" 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" /> calcMode="spline" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" repeatCount="indefinite" />
</circle> </circle>
<circle cx="90" cy="10" r="4" transform="rotate(60 90 90)" /> </g>
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

62
datahub-web-react/src/images/datahub-logo-color-loading_simple.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

69
datahub-web-react/src/images/datahub-logo-color-popup.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

66
datahub-web-react/src/images/datahub-logo-color-stable.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB