181 lines
10 KiB
XML
181 lines
10 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="vpLayerGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#6366F1"/>
|
||
|
|
<stop offset="100%" style="stop-color:#4F46E5"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="vpProcessorGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#22D3EE"/>
|
||
|
|
<stop offset="100%" style="stop-color:#06B6D4"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="vpFlowGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#6366F1"/>
|
||
|
|
<stop offset="50%" style="stop-color:#22D3EE"/>
|
||
|
|
<stop offset="100%" style="stop-color:#6366F1"/>
|
||
|
|
<animate attributeName="x1" values="0%;100%;0%" dur="2.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="x2" values="100%;200%;100%" dur="2.5s" repeatCount="indefinite"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="vpUnderlineGrad" x1="45" y1="305" x2="355" y2="305" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop offset="0%" style="stop-color:#6366F1"/>
|
||
|
|
<stop offset="50%" style="stop-color:#22D3EE"/>
|
||
|
|
<stop offset="100%" style="stop-color:#6366F1"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="vpShimmer" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#6366F1"/>
|
||
|
|
<stop offset="40%" style="stop-color:#6366F1"/>
|
||
|
|
<stop offset="50%" style="stop-color:#22D3EE"/>
|
||
|
|
<stop offset="60%" style="stop-color:#6366F1"/>
|
||
|
|
<stop offset="100%" style="stop-color:#6366F1"/>
|
||
|
|
<animate attributeName="x1" values="-100%;100%" dur="3s" repeatCount="indefinite" begin="2s"/>
|
||
|
|
<animate attributeName="x2" values="0%;200%" dur="3s" repeatCount="indefinite" begin="2s"/>
|
||
|
|
</linearGradient>
|
||
|
|
<filter id="vpProcessorGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="5" result="coloredBlur">
|
||
|
|
<animate attributeName="stdDeviation" values="4;8;4" dur="1.5s" repeatCount="indefinite"/>
|
||
|
|
</feGaussianBlur>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
<filter id="vpNodeGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<path id="vpPathIn1" d="M25 40 Q25 65 55 80 Q85 95 95 100" fill="none"/>
|
||
|
|
<path id="vpPathIn2" d="M215 40 Q215 65 185 80 Q155 95 145 100" fill="none"/>
|
||
|
|
<path id="vpPathOut1" d="M95 100 Q85 105 55 120 Q25 135 25 160" fill="none"/>
|
||
|
|
<path id="vpPathOut2" d="M145 100 Q155 105 185 120 Q215 135 215 160" fill="none"/>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.vp-wordmark { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; }
|
||
|
|
</style>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Logo Icon (centered) -->
|
||
|
|
<g transform="translate(90, 40)">
|
||
|
|
<!-- Layers -->
|
||
|
|
<rect x="0" y="18" width="220" height="24" rx="5" fill="url(#vpLayerGrad)" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.7" dur="0.4s" fill="freeze"/>
|
||
|
|
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3s" repeatCount="indefinite" begin="1s"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="0" y="88" width="220" height="24" rx="5" fill="url(#vpLayerGrad)" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;1" dur="0.4s" fill="freeze" begin="0.15s"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="0" y="158" width="220" height="24" rx="5" fill="url(#vpLayerGrad)" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.7" dur="0.4s" fill="freeze" begin="0.3s"/>
|
||
|
|
<animate attributeName="opacity" values="0.8;0.5;0.8" dur="3s" repeatCount="indefinite" begin="1s"/>
|
||
|
|
</rect>
|
||
|
|
|
||
|
|
<!-- Flows -->
|
||
|
|
<path d="M35 42 Q35 65 70 85 Q95 100 95 100" stroke="url(#vpFlowGrad)" stroke-width="3" fill="none" opacity="0" stroke-linecap="round">
|
||
|
|
<animate attributeName="opacity" values="0;0.6" dur="0.3s" fill="freeze" begin="0.5s"/>
|
||
|
|
</path>
|
||
|
|
<path d="M185 42 Q185 65 150 85 Q125 100 125 100" stroke="url(#vpFlowGrad)" stroke-width="3" fill="none" opacity="0" stroke-linecap="round">
|
||
|
|
<animate attributeName="opacity" values="0;0.6" dur="0.3s" fill="freeze" begin="0.6s"/>
|
||
|
|
</path>
|
||
|
|
<path d="M95 100 Q95 100 70 115 Q35 135 35 158" stroke="url(#vpFlowGrad)" stroke-width="3" fill="none" opacity="0" stroke-linecap="round">
|
||
|
|
<animate attributeName="opacity" values="0;0.6" dur="0.3s" fill="freeze" begin="0.7s"/>
|
||
|
|
</path>
|
||
|
|
<path d="M125 100 Q125 100 150 115 Q185 135 185 158" stroke="url(#vpFlowGrad)" stroke-width="3" fill="none" opacity="0" stroke-linecap="round">
|
||
|
|
<animate attributeName="opacity" values="0;0.6" dur="0.3s" fill="freeze" begin="0.8s"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Particles -->
|
||
|
|
<circle r="4" fill="#22D3EE" filter="url(#vpNodeGlow)">
|
||
|
|
<animateMotion dur="1.2s" repeatCount="indefinite" begin="1.5s">
|
||
|
|
<mpath href="#vpPathIn1"/>
|
||
|
|
</animateMotion>
|
||
|
|
<animate attributeName="opacity" values="1;0.5;0.2" dur="1.2s" repeatCount="indefinite" begin="1.5s"/>
|
||
|
|
</circle>
|
||
|
|
<circle r="4" fill="#22D3EE" filter="url(#vpNodeGlow)">
|
||
|
|
<animateMotion dur="1.2s" repeatCount="indefinite" begin="1.8s">
|
||
|
|
<mpath href="#vpPathIn2"/>
|
||
|
|
</animateMotion>
|
||
|
|
<animate attributeName="opacity" values="1;0.5;0.2" dur="1.2s" repeatCount="indefinite" begin="1.8s"/>
|
||
|
|
</circle>
|
||
|
|
<circle r="3" fill="#6366F1">
|
||
|
|
<animateMotion dur="1.2s" repeatCount="indefinite" begin="2s">
|
||
|
|
<mpath href="#vpPathOut1"/>
|
||
|
|
</animateMotion>
|
||
|
|
<animate attributeName="opacity" values="0.2;0.5;1" dur="1.2s" repeatCount="indefinite" begin="2s"/>
|
||
|
|
</circle>
|
||
|
|
<circle r="3" fill="#6366F1">
|
||
|
|
<animateMotion dur="1.2s" repeatCount="indefinite" begin="2.3s">
|
||
|
|
<mpath href="#vpPathOut2"/>
|
||
|
|
</animateMotion>
|
||
|
|
<animate attributeName="opacity" values="0.2;0.5;1" dur="1.2s" repeatCount="indefinite" begin="2.3s"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- I/O Points -->
|
||
|
|
<circle cx="35" cy="30" r="0" fill="#22D3EE" filter="url(#vpNodeGlow)">
|
||
|
|
<animate attributeName="r" values="0;6" dur="0.25s" fill="freeze" begin="0.2s"/>
|
||
|
|
<animate attributeName="r" values="5;8;5" dur="2s" repeatCount="indefinite" begin="1.2s"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="185" cy="30" r="0" fill="#22D3EE" filter="url(#vpNodeGlow)">
|
||
|
|
<animate attributeName="r" values="0;6" dur="0.25s" fill="freeze" begin="0.25s"/>
|
||
|
|
<animate attributeName="r" values="6;5;6" dur="2s" repeatCount="indefinite" begin="1.2s"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="35" cy="170" r="0" fill="#6366F1" filter="url(#vpNodeGlow)">
|
||
|
|
<animate attributeName="r" values="0;6" dur="0.25s" fill="freeze" begin="0.35s"/>
|
||
|
|
<animate attributeName="r" values="5;8;5" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="185" cy="170" r="0" fill="#6366F1" filter="url(#vpNodeGlow)">
|
||
|
|
<animate attributeName="r" values="0;6" dur="0.25s" fill="freeze" begin="0.4s"/>
|
||
|
|
<animate attributeName="r" values="6;5;6" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Central processor -->
|
||
|
|
<rect x="85" y="75" width="50" height="50" rx="9" fill="url(#vpProcessorGrad)" filter="url(#vpProcessorGlow)" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;1" dur="0.4s" fill="freeze" begin="0.45s"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="97" y="87" width="26" height="26" rx="5" fill="#ffffff" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.95" dur="0.3s" fill="freeze" begin="0.6s"/>
|
||
|
|
</rect>
|
||
|
|
|
||
|
|
<!-- Equalizer bars -->
|
||
|
|
<rect x="101" y="93" width="4" height="11" rx="1" fill="#22D3EE" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;1" dur="0.2s" fill="freeze" begin="0.8s"/>
|
||
|
|
<animate attributeName="height" values="11;18;8;14;11" dur="0.6s" repeatCount="indefinite" begin="1.2s"/>
|
||
|
|
<animate attributeName="y" values="93;90;96;93;93" dur="0.6s" repeatCount="indefinite" begin="1.2s"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="108" y="91" width="4" height="15" rx="1" fill="#06B6D4" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;1" dur="0.2s" fill="freeze" begin="0.85s"/>
|
||
|
|
<animate attributeName="height" values="15;9;13;18;15" dur="0.55s" repeatCount="indefinite" begin="1.25s"/>
|
||
|
|
<animate attributeName="y" values="91;95;93;90;91" dur="0.55s" repeatCount="indefinite" begin="1.25s"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="115" y="94" width="4" height="9" rx="1" fill="#22D3EE" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;1" dur="0.2s" fill="freeze" begin="0.9s"/>
|
||
|
|
<animate attributeName="height" values="9;16;8;12;9" dur="0.5s" repeatCount="indefinite" begin="1.3s"/>
|
||
|
|
<animate attributeName="y" values="94;91;96;94;94" dur="0.5s" repeatCount="indefinite" begin="1.3s"/>
|
||
|
|
</rect>
|
||
|
|
|
||
|
|
<!-- Processor pulse -->
|
||
|
|
<rect x="85" y="75" width="50" height="50" rx="9" fill="none" stroke="#22D3EE" stroke-width="2" opacity="0">
|
||
|
|
<animate attributeName="x" values="85;75" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
||
|
|
<animate attributeName="y" values="75;65" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
||
|
|
<animate attributeName="width" values="50;70" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
||
|
|
<animate attributeName="height" values="50;70" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
||
|
|
<animate attributeName="rx" values="9;12" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
||
|
|
<animate attributeName="opacity" values="0.5;0" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
||
|
|
</rect>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Wordmark (centered below icon) -->
|
||
|
|
<text x="200" y="285" class="vp-wordmark" font-size="48" fill="url(#vpShimmer)" text-anchor="middle" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;1" dur="0.5s" fill="freeze" begin="0.9s"/>
|
||
|
|
Stratum<tspan fill="url(#vpProcessorGrad)">I</tspan>Ops
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Underline -->
|
||
|
|
<line x1="45" y1="305" x2="45" y2="305" stroke="url(#vpUnderlineGrad)" stroke-width="3" stroke-linecap="round" opacity="0">
|
||
|
|
<animate attributeName="opacity" values="0;0.7" dur="0.1s" fill="freeze" begin="1.4s"/>
|
||
|
|
<animate attributeName="x2" values="45;355" dur="0.8s" fill="freeze" begin="1.4s" calcMode="spline" keySplines="0.25 0.1 0.25 1"/>
|
||
|
|
</line>
|
||
|
|
|
||
|
|
</svg>
|