mirror of
https://github.com/datahub-project/datahub.git
synced 2025-11-02 19:58:59 +00:00
feat(ui): Add svg datahub satellite loading logo (#4067)
This commit is contained in:
Ebu (えぶ)
GitHub
parent
47db7b5e2c
commit
54eb155f3e
@ -1,48 +1,63 @@
|
||||
<svg id="e2d48uIsWUR1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
<svg id="datahub-logo-color-loading_pendulum" 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="e2d48uIsWUR3-stroke" x1="0.5" y1="0" x2="0.5" y2="1" spreadMethod="pad"
|
||||
gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)">
|
||||
<stop id="e2d48uIsWUR3-stroke-0" offset="0%" stop-color="#f84e63" />
|
||||
<stop id="e2d48uIsWUR3-stroke-1" offset="100%" stop-color="#dd3163" />
|
||||
<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="e2d48uIsWUR5-stroke" x1="0.5" y1="0" x2="0.5" y2="1" spreadMethod="pad"
|
||||
gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)">
|
||||
<stop id="e2d48uIsWUR5-stroke-0" offset="0%" stop-color="#1890ff" />
|
||||
<stop id="e2d48uIsWUR5-stroke-1" offset="100%" stop-color="#18b5ff" />
|
||||
<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="e2d48uIsWUR9-stroke" x1="0.5" y1="0" x2="0.5" y2="1" spreadMethod="pad"
|
||||
gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)">
|
||||
<stop id="e2d48uIsWUR9-stroke-0" offset="0%" stop-color="#efb700" />
|
||||
<stop id="e2d48uIsWUR9-stroke-1" offset="100%" stop-color="#efb200" />
|
||||
<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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</mask>
|
||||
</defs>
|
||||
<g>
|
||||
<ellipse rx="60" ry="60" transform="matrix(0-1 1 0 90 90)" fill="none" stroke="url(#e2d48uIsWUR5-stroke)"
|
||||
stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="226.2" />
|
||||
<ellipse rx="10" ry="10" transform="translate(160 50)" fill="#18b4ff" stroke-width="0" />
|
||||
<line x1="-70" y1="40" x2="70" y2="-40" transform="translate(90 90)" fill="none" stroke="#18b4ff"
|
||||
stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="180"
|
||||
stroke-dasharray="161" />
|
||||
<animateTransform attributeName="transform" type="rotate" values="0 90 90; -30 90 90; 0 90 90" keyTimes="0; 0.1; 1" dur="6s"
|
||||
|
||||
<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>
|
||||
<ellipse rx="30" ry="30" transform="translate(90 90)" fill="none" stroke="url(#e2d48uIsWUR3-stroke)"
|
||||
stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="47.13"
|
||||
stroke-dasharray="94.25" />
|
||||
<animateTransform attributeName="transform" type="rotate" from="360 90 90" to="0 90 90" dur="1s"
|
||||
repeatCount="indefinite" />
|
||||
</g>
|
||||
<g>
|
||||
<ellipse rx="45" ry="45" transform="matrix(0-1 1 0 90 90),rotate(160)" fill="none"
|
||||
stroke="url(#e2d48uIsWUR9-stroke)" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-dasharray="169.65" />
|
||||
<ellipse rx="10" ry="10" transform="translate(20 130)" fill="#efb400" stroke-width="0" />
|
||||
<line x1="-70" y1="40" x2="70" y2="-40" transform="translate(90 90)" fill="none" stroke="#efb200"
|
||||
stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="130"
|
||||
stroke-dasharray="161" />
|
||||
|
||||
<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="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>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.6 KiB |
@ -0,0 +1,69 @@
|
||||
<svg id="datahub-logo-color-loading_satellite" 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.03" 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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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="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="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>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
Loading…
x
Reference in New Issue
Block a user