first commit
This commit is contained in:
@@ -0,0 +1,115 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="70 80 260 260" width="200" height="200">
|
||||
<defs>
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="2.5" result="blur" />
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
||||
</filter>
|
||||
<filter id="glow-strong" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur stdDeviation="4" result="blur" />
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
||||
</filter>
|
||||
|
||||
<linearGradient id="data-stream" x1="0%" y1="100%" x2="0%" y2="0%">
|
||||
<stop offset="0%" stop-color="#00E5FF" stop-opacity="0" />
|
||||
<stop offset="50%" stop-color="#00E5FF" stop-opacity="0.9" />
|
||||
<stop offset="100%" stop-color="#00E5FF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g transform="translate(0, 10)">
|
||||
|
||||
<g id="base-platform">
|
||||
<polygon points="200,275 90,220 90,245 200,300" fill="#282B30" />
|
||||
<polygon points="200,275 310,220 310,245 200,300" fill="#1C1E22" />
|
||||
<polygon points="200,275 90,220 200,165 310,220" fill="#3E434A" />
|
||||
|
||||
<polygon points="200,274 91,220 200,166 309,220" fill="none" stroke="#00E5FF" stroke-width="2" filter="url(#glow)">
|
||||
<animate attributeName="opacity" values="0.2; 0.8; 0.2" dur="3s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<g transform="translate(200, 210)">
|
||||
<polygon points="0,0 -40,-20 0,-40 40,-20" fill="rgba(0,0,0,0.5)">
|
||||
<animate attributeName="opacity" values="0.6; 0.2; 0.6" dur="4s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<g id="node-back">
|
||||
<animateTransform attributeName="transform" type="translate" values="200,210; 200,198; 200,210" dur="4s" repeatCount="indefinite" />
|
||||
|
||||
<line x1="0" y1="0" x2="0" y2="40" stroke="url(#data-stream)" stroke-width="4" stroke-dasharray="8,4">
|
||||
<animate attributeName="stroke-dashoffset" from="24" to="0" dur="1s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" values="0.3; 1; 0.3" dur="2s" repeatCount="indefinite" />
|
||||
</line>
|
||||
|
||||
<polygon points="0,0 -40,-20 -40,-65 0,-45" fill="#E2E5E9" stroke="#111214" stroke-width="2" stroke-linejoin="round" />
|
||||
<polygon points="0,0 40,-20 40,-65 0,-45" fill="#C9CDD3" stroke="#111214" stroke-width="2" stroke-linejoin="round" />
|
||||
<polygon points="0,-45 -40,-65 0,-85 40,-65" fill="#FFFFFF" stroke="#111214" stroke-width="2" stroke-linejoin="round" />
|
||||
</g>
|
||||
|
||||
<g transform="translate(154, 233)">
|
||||
<polygon points="0,0 -40,-20 0,-40 40,-20" fill="rgba(0,0,0,0.4)">
|
||||
<animate attributeName="opacity" values="0.5; 0.2; 0.5" dur="3.5s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<g id="node-left">
|
||||
<animateTransform attributeName="transform" type="translate" values="154,233; 154,225; 154,233" dur="3.5s" repeatCount="indefinite" />
|
||||
<polygon points="0,0 -40,-20 -40,-65 0,-45" fill="#18191C" />
|
||||
<polygon points="0,0 40,-20 40,-65 0,-45" fill="#0D0D10" />
|
||||
<polygon points="0,-45 -40,-65 0,-85 40,-65" fill="#2A2B2F" />
|
||||
|
||||
<polyline points="-40,-20 -40,-65 0,-85" fill="none" stroke="#00E5FF" stroke-width="2.5" stroke-dasharray="15 80" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="95" to="-95" dur="2.5s" repeatCount="indefinite" />
|
||||
</polyline>
|
||||
</g>
|
||||
|
||||
<g transform="translate(246, 233)">
|
||||
<polygon points="0,0 -40,-20 0,-40 40,-20" fill="rgba(0,0,0,0.4)">
|
||||
<animate attributeName="opacity" values="0.5; 0.2; 0.5" dur="4.2s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<g id="node-right">
|
||||
<animateTransform attributeName="transform" type="translate" values="246,233; 246,223; 246,233" dur="4.2s" repeatCount="indefinite" />
|
||||
<polygon points="0,0 -40,-20 -40,-65 0,-45" fill="#18191C" />
|
||||
<polygon points="0,0 40,-20 40,-65 0,-45" fill="#0D0D10" />
|
||||
<polygon points="0,-45 -40,-65 0,-85 40,-65" fill="#2A2B2F" />
|
||||
|
||||
<polyline points="40,-20 40,-65 0,-85" fill="none" stroke="#00E5FF" stroke-width="2.5" stroke-dasharray="15 80" filter="url(#glow)">
|
||||
<animate attributeName="stroke-dashoffset" from="-95" to="95" dur="3s" repeatCount="indefinite" />
|
||||
</polyline>
|
||||
</g>
|
||||
|
||||
<g transform="translate(200, 256)">
|
||||
<polygon points="0,0 -40,-20 0,-40 40,-20" fill="rgba(0,0,0,0.3)">
|
||||
<animate attributeName="opacity" values="0.4; 0.1; 0.4" dur="3.8s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
<g id="node-front">
|
||||
<animateTransform attributeName="transform" type="translate" values="200,256; 200,246; 200,256" dur="3.8s" repeatCount="indefinite" />
|
||||
|
||||
<line x1="-40" y1="-20" x2="0" y2="-40" stroke="#111214" stroke-width="2" opacity="0.4" stroke-dasharray="3,3" />
|
||||
<line x1="40" y1="-20" x2="0" y2="-40" stroke="#111214" stroke-width="2" opacity="0.4" stroke-dasharray="3,3" />
|
||||
<line x1="0" y1="-40" x2="0" y2="-85" stroke="#111214" stroke-width="2" opacity="0.4" stroke-dasharray="3,3" />
|
||||
|
||||
<polygon points="0,0 -40,-20 -40,-65 0,-45" fill="rgba(200,200,200,0.1)" />
|
||||
<polygon points="0,0 40,-20 40,-65 0,-45" fill="rgba(200,200,200,0.05)" />
|
||||
<polygon points="0,-45 -40,-65 0,-85 40,-65" fill="rgba(200,200,200,0.15)" />
|
||||
|
||||
<g stroke="#3E434A" stroke-width="2" stroke-linejoin="round" fill="none" stroke-dasharray="6,4">
|
||||
<animate attributeName="stroke-dashoffset" from="20" to="0" dur="1s" repeatCount="indefinite" />
|
||||
<polygon points="0,0 -40,-20 -40,-65 0,-45" />
|
||||
<polygon points="0,0 40,-20 40,-65 0,-45" />
|
||||
<polygon points="0,-45 -40,-65 0,-85 40,-65" />
|
||||
</g>
|
||||
|
||||
<polygon points="0,0 -40,-20 0,-40 40,-20" fill="#00E5FF" opacity="0.5" filter="url(#glow-strong)">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,-5; 0,-45; 0,-5" dur="2.5s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" values="0; 0.6; 0.6; 0" keyTimes="0; 0.2; 0.8; 1" dur="2.5s" repeatCount="indefinite" />
|
||||
</polygon>
|
||||
</g>
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,144 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
|
||||
<defs>
|
||||
|
||||
<style>
|
||||
|
||||
@keyframes orbitRotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
|
||||
@keyframes nebulaPulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.6));
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes dataStream {
|
||||
to { stroke-dashoffset: -40; }
|
||||
}
|
||||
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); opacity: 0.8; }
|
||||
50% { transform: translateY(-4px); opacity: 1; }
|
||||
}
|
||||
|
||||
.orbit-ring {
|
||||
transform-origin: 100px 100px;
|
||||
animation: orbitRotate 12s linear infinite;
|
||||
}
|
||||
|
||||
.orbit-ring-reverse {
|
||||
transform-origin: 100px 100px;
|
||||
animation: orbitRotate 8s linear infinite reverse;
|
||||
}
|
||||
|
||||
.prime-core {
|
||||
transform-origin: 100px 100px;
|
||||
animation: nebulaPulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.stream-line {
|
||||
stroke-dasharray: 6 6;
|
||||
animation: dataStream 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.crown-dot {
|
||||
animation: float 2s ease-in-out infinite;
|
||||
}
|
||||
.crown-dot:nth-child(2) { animation-delay: 0.5s; }
|
||||
.crown-dot:nth-child(3) { animation-delay: 1s; }
|
||||
|
||||
.prime-text {
|
||||
font-family: 'Courier New', monospace;
|
||||
letter-spacing: 3px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<linearGradient id="platinumGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#f8fafc" />
|
||||
<stop offset="40%" stop-color="#e2e8f0" />
|
||||
<stop offset="100%" stop-color="#94a3b8" />
|
||||
</linearGradient>
|
||||
|
||||
|
||||
<linearGradient id="royalGradient" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#7c3aed" />
|
||||
<stop offset="100%" stop-color="#d946ef" />
|
||||
</linearGradient>
|
||||
|
||||
|
||||
<linearGradient id="voidGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2e1065" />
|
||||
<stop offset="100%" stop-color="#0f172a" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
|
||||
|
||||
|
||||
<path d="M20 50 V20 H50 M150 20 H180 V50 M180 150 V180 H150 M50 180 H20 V150"
|
||||
stroke="#475569" stroke-width="1" fill="none" opacity="0.5"/>
|
||||
|
||||
|
||||
<circle cx="100" cy="100" r="85" stroke="#334155" stroke-width="0.5" fill="none" opacity="0.3"/>
|
||||
|
||||
|
||||
<g class="orbit-ring">
|
||||
<circle cx="100" cy="100" r="78" fill="none" stroke="url(#royalGradient)" stroke-width="1.5"
|
||||
stroke-dasharray="20 120" stroke-linecap="round" />
|
||||
<circle cx="100" cy="100" r="78" fill="none" stroke="url(#royalGradient)" stroke-width="0.5"
|
||||
stroke-dasharray="2 10" opacity="0.5"/>
|
||||
</g>
|
||||
|
||||
|
||||
<g class="orbit-ring-reverse">
|
||||
<circle cx="100" cy="100" r="62" fill="none" stroke="#e2e8f0" stroke-width="1"
|
||||
stroke-dasharray="40 80" opacity="0.4" />
|
||||
|
||||
<circle cx="100" cy="38" r="2" fill="#d946ef" />
|
||||
<circle cx="100" cy="162" r="2" fill="#d946ef" />
|
||||
</g>
|
||||
|
||||
|
||||
<g class="prime-core">
|
||||
|
||||
<path d="M100 50 L145 75 V125 L100 150 L55 125 V75 Z"
|
||||
fill="url(#voidGradient)" stroke="url(#platinumGradient)" stroke-width="2" />
|
||||
|
||||
|
||||
<path d="M55 75 L100 85 M145 75 L100 85 M100 150 V120"
|
||||
stroke="#a855f7" stroke-width="1" opacity="0.6"/>
|
||||
|
||||
|
||||
<g transform="translate(0, -5)">
|
||||
<circle cx="100" cy="40" r="3" fill="#f8fafc" class="crown-dot" />
|
||||
<circle cx="85" cy="46" r="2" fill="#d946ef" class="crown-dot" />
|
||||
<circle cx="115" cy="46" r="2" fill="#d946ef" class="crown-dot" />
|
||||
</g>
|
||||
|
||||
|
||||
<path d="M80 135 H120" stroke="#d946ef" stroke-width="3" stroke-linecap="round"
|
||||
class="stream-line" />
|
||||
</g>
|
||||
|
||||
|
||||
<text x="100" y="108" text-anchor="middle" font-size="36" font-weight="900"
|
||||
fill="url(#platinumGradient)" class="prime-text">KVM</text>
|
||||
|
||||
|
||||
<rect x="90" y="122" width="20" height="2" rx="1" fill="#a855f7" opacity="0.8" />
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,114 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
|
||||
<defs>
|
||||
|
||||
<style>
|
||||
|
||||
@keyframes spinSlow {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes spinReverse {
|
||||
from { transform: rotate(360deg); }
|
||||
to { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
|
||||
@keyframes corePulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 0 2px rgba(234, 179, 8, 0.5));
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.9));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes circuitFlow {
|
||||
to { stroke-dashoffset: -20; }
|
||||
}
|
||||
|
||||
|
||||
@keyframes glitchText {
|
||||
0%, 90%, 100% { opacity: 1; transform: translate(0); }
|
||||
92% { opacity: 0.8; transform: translate(-2px, 1px); }
|
||||
94% { opacity: 1; transform: translate(2px, -1px); }
|
||||
96% { opacity: 0.5; transform: translate(0); }
|
||||
}
|
||||
|
||||
|
||||
.ring-outer {
|
||||
transform-origin: 100px 100px;
|
||||
animation: spinSlow 10s linear infinite;
|
||||
}
|
||||
|
||||
.ring-inner {
|
||||
transform-origin: 100px 100px;
|
||||
animation: spinReverse 6s linear infinite;
|
||||
}
|
||||
|
||||
.core-hex {
|
||||
transform-origin: 100px 100px;
|
||||
animation: corePulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circuit-line {
|
||||
stroke-dasharray: 4 4;
|
||||
animation: circuitFlow 1s linear infinite;
|
||||
}
|
||||
|
||||
.pro-text {
|
||||
font-family: 'Courier New', monospace;
|
||||
animation: glitchText 4s infinite;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#fde047" />
|
||||
<stop offset="100%" stop-color="#eab308" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
|
||||
<path d="M20 100 H180 M100 20 V180" stroke="#334155" stroke-width="1" />
|
||||
<circle cx="100" cy="100" r="80" stroke="#334155" stroke-width="1" fill="none"/>
|
||||
|
||||
|
||||
<circle cx="100" cy="100" r="75" fill="none" stroke="#0e7490" stroke-width="2"
|
||||
stroke-dasharray="20 40" stroke-opacity="0.5" class="ring-outer" />
|
||||
|
||||
<circle cx="100" cy="100" r="65" fill="none" stroke="#0ea5e9" stroke-width="1.5"
|
||||
stroke-dasharray="60 100" class="ring-outer" style="animation-duration: 15s; opacity: 0.3;" />
|
||||
|
||||
|
||||
<g class="ring-inner">
|
||||
<circle cx="100" cy="100" r="55" fill="none" stroke="#64748b" stroke-width="1" stroke-dasharray="2 8" />
|
||||
<rect x="98" y="42" width="4" height="4" fill="#22d3ee" />
|
||||
<rect x="98" y="154" width="4" height="4" fill="#22d3ee" />
|
||||
</g>
|
||||
|
||||
|
||||
<g class="core-hex">
|
||||
|
||||
<path d="M100 55 L138.9 77.5 L138.9 122.5 L100 145 L61.1 122.5 L61.1 77.5 Z"
|
||||
fill="#0f172a" stroke="url(#goldGradient)" stroke-width="3" />
|
||||
|
||||
|
||||
<path d="M100 60 L134 80 L134 120 L100 140 L66 120 L66 80 Z"
|
||||
fill="url(#goldGradient)" opacity="0.1" />
|
||||
|
||||
|
||||
<path d="M61.1 77.5 L40 65 M138.9 77.5 L160 65 M100 145 L100 165"
|
||||
stroke="#eab308" stroke-width="2" class="circuit-line" />
|
||||
</g>
|
||||
|
||||
|
||||
<text x="100" y="108" text-anchor="middle" font-size="32" font-weight="900"
|
||||
fill="url(#goldGradient)" class="pro-text" letter-spacing="2">LXC</text>
|
||||
|
||||
|
||||
<rect x="80" y="125" width="40" height="4" rx="2" fill="#22d3ee" opacity="0.8" />
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
Reference in New Issue
Block a user