177 lines
9.8 KiB
XML
177 lines
9.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
|
<defs>
|
|
<linearGradient id="hdLayerGrad" 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="hdProcessorGrad" 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="hdFlowGrad" 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>
|
|
<filter id="hdProcessorGlow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="10" result="coloredBlur">
|
|
<animate attributeName="stdDeviation" values="8;14;8" dur="1.5s" repeatCount="indefinite"/>
|
|
</feGaussianBlur>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="hdNodeGlow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="5" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="hdBgGlow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur stdDeviation="30" result="blur"/>
|
|
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
|
|
</filter>
|
|
|
|
<path id="hdPathIn1" d="M110 155 Q110 195 170 220 Q220 245 220 256" fill="none"/>
|
|
<path id="hdPathIn2" d="M402 155 Q402 195 342 220 Q292 245 292 256" fill="none"/>
|
|
<path id="hdPathOut1" d="M220 256 Q220 267 170 292 Q110 317 110 357" fill="none"/>
|
|
<path id="hdPathOut2" d="M292 256 Q292 267 342 292 Q402 317 402 357" fill="none"/>
|
|
</defs>
|
|
|
|
<!-- Dark background -->
|
|
<rect width="512" height="512" rx="96" fill="#0F172A"/>
|
|
|
|
<!-- Ambient glow -->
|
|
<ellipse cx="256" cy="256" rx="140" ry="100" fill="#6366F1" opacity="0.08" filter="url(#hdBgGlow)">
|
|
<animate attributeName="opacity" values="0.05;0.12;0.05" dur="4s" repeatCount="indefinite"/>
|
|
</ellipse>
|
|
|
|
<!-- Layers -->
|
|
<rect x="80" y="115" width="352" height="48" rx="10" fill="url(#hdLayerGrad)" opacity="0">
|
|
<animate attributeName="opacity" values="0;0.75" dur="0.4s" fill="freeze"/>
|
|
<animate attributeName="opacity" values="0.6;0.85;0.6" dur="3s" repeatCount="indefinite" begin="1s"/>
|
|
</rect>
|
|
<rect x="80" y="232" width="352" height="48" rx="10" fill="url(#hdLayerGrad)" opacity="0">
|
|
<animate attributeName="opacity" values="0;1" dur="0.4s" fill="freeze" begin="0.15s"/>
|
|
</rect>
|
|
<rect x="80" y="349" width="352" height="48" rx="10" fill="url(#hdLayerGrad)" opacity="0">
|
|
<animate attributeName="opacity" values="0;0.75" dur="0.4s" fill="freeze" begin="0.3s"/>
|
|
<animate attributeName="opacity" values="0.85;0.6;0.85" dur="3s" repeatCount="indefinite" begin="1s"/>
|
|
</rect>
|
|
|
|
<!-- Flows -->
|
|
<path d="M130 163 Q130 200 190 230 Q230 250 230 256" stroke="url(#hdFlowGrad)" stroke-width="4" fill="none" opacity="0" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0;0.7" dur="0.3s" fill="freeze" begin="0.5s"/>
|
|
</path>
|
|
<path d="M382 163 Q382 200 322 230 Q282 250 282 256" stroke="url(#hdFlowGrad)" stroke-width="4" fill="none" opacity="0" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0;0.7" dur="0.3s" fill="freeze" begin="0.6s"/>
|
|
</path>
|
|
<path d="M230 256 Q230 262 190 282 Q130 312 130 349" stroke="url(#hdFlowGrad)" stroke-width="4" fill="none" opacity="0" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0;0.7" dur="0.3s" fill="freeze" begin="0.7s"/>
|
|
</path>
|
|
<path d="M282 256 Q282 262 322 282 Q382 312 382 349" stroke="url(#hdFlowGrad)" stroke-width="4" fill="none" opacity="0" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0;0.7" dur="0.3s" fill="freeze" begin="0.8s"/>
|
|
</path>
|
|
|
|
<!-- Particles -->
|
|
<circle r="6" fill="#22D3EE" filter="url(#hdNodeGlow)">
|
|
<animateMotion dur="1.3s" repeatCount="indefinite" begin="1.3s">
|
|
<mpath href="#hdPathIn1"/>
|
|
</animateMotion>
|
|
<animate attributeName="opacity" values="1;0.6;0.2" dur="1.3s" repeatCount="indefinite" begin="1.3s"/>
|
|
</circle>
|
|
<circle r="6" fill="#22D3EE" filter="url(#hdNodeGlow)">
|
|
<animateMotion dur="1.3s" repeatCount="indefinite" begin="1.7s">
|
|
<mpath href="#hdPathIn2"/>
|
|
</animateMotion>
|
|
<animate attributeName="opacity" values="1;0.6;0.2" dur="1.3s" repeatCount="indefinite" begin="1.7s"/>
|
|
</circle>
|
|
<circle r="5" fill="#6366F1">
|
|
<animateMotion dur="1.3s" repeatCount="indefinite" begin="2s">
|
|
<mpath href="#hdPathOut1"/>
|
|
</animateMotion>
|
|
<animate attributeName="opacity" values="0.2;0.6;1" dur="1.3s" repeatCount="indefinite" begin="2s"/>
|
|
</circle>
|
|
<circle r="5" fill="#6366F1">
|
|
<animateMotion dur="1.3s" repeatCount="indefinite" begin="2.3s">
|
|
<mpath href="#hdPathOut2"/>
|
|
</animateMotion>
|
|
<animate attributeName="opacity" values="0.2;0.6;1" dur="1.3s" repeatCount="indefinite" begin="2.3s"/>
|
|
</circle>
|
|
|
|
<!-- I/O Points -->
|
|
<circle cx="130" cy="139" r="0" fill="#22D3EE" filter="url(#hdNodeGlow)">
|
|
<animate attributeName="r" values="0;11" dur="0.25s" fill="freeze" begin="0.2s"/>
|
|
<animate attributeName="r" values="10;13;10" dur="2s" repeatCount="indefinite" begin="1.2s"/>
|
|
</circle>
|
|
<circle cx="382" cy="139" r="0" fill="#22D3EE" filter="url(#hdNodeGlow)">
|
|
<animate attributeName="r" values="0;11" dur="0.25s" fill="freeze" begin="0.25s"/>
|
|
<animate attributeName="r" values="11;10;11" dur="2s" repeatCount="indefinite" begin="1.2s"/>
|
|
</circle>
|
|
<circle cx="130" cy="373" r="0" fill="#6366F1" filter="url(#hdNodeGlow)">
|
|
<animate attributeName="r" values="0;11" dur="0.25s" fill="freeze" begin="0.35s"/>
|
|
<animate attributeName="r" values="10;13;10" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
</circle>
|
|
<circle cx="382" cy="373" r="0" fill="#6366F1" filter="url(#hdNodeGlow)">
|
|
<animate attributeName="r" values="0;11" dur="0.25s" fill="freeze" begin="0.4s"/>
|
|
<animate attributeName="r" values="11;10;11" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
</circle>
|
|
|
|
<!-- Central processor -->
|
|
<rect x="206" y="206" width="100" height="100" rx="18" fill="url(#hdProcessorGrad)" filter="url(#hdProcessorGlow)" opacity="0">
|
|
<animate attributeName="opacity" values="0;1" dur="0.4s" fill="freeze" begin="0.45s"/>
|
|
</rect>
|
|
<rect x="224" y="224" width="64" height="64" rx="10" fill="#ffffff" opacity="0">
|
|
<animate attributeName="opacity" values="0;0.95" dur="0.3s" fill="freeze" begin="0.6s"/>
|
|
</rect>
|
|
|
|
<!-- Equalizer bars -->
|
|
<rect x="236" y="258" width="8" height="18" rx="2" fill="#22D3EE" opacity="0">
|
|
<animate attributeName="opacity" values="0;1" dur="0.2s" fill="freeze" begin="0.8s"/>
|
|
<animate attributeName="height" values="18;30;12;24;18" dur="0.6s" repeatCount="indefinite" begin="1.2s"/>
|
|
<animate attributeName="y" values="258;252;264;256;258" dur="0.6s" repeatCount="indefinite" begin="1.2s"/>
|
|
</rect>
|
|
<rect x="252" y="250" width="8" height="34" rx="2" fill="#06B6D4" opacity="0">
|
|
<animate attributeName="opacity" values="0;1" dur="0.2s" fill="freeze" begin="0.85s"/>
|
|
<animate attributeName="height" values="34;16;28;40;34" dur="0.55s" repeatCount="indefinite" begin="1.25s"/>
|
|
<animate attributeName="y" values="250;262;254;246;250" dur="0.55s" repeatCount="indefinite" begin="1.25s"/>
|
|
</rect>
|
|
<rect x="268" y="254" width="8" height="26" rx="2" fill="#22D3EE" opacity="0">
|
|
<animate attributeName="opacity" values="0;1" dur="0.2s" fill="freeze" begin="0.9s"/>
|
|
<animate attributeName="height" values="26;38;20;32;26" dur="0.5s" repeatCount="indefinite" begin="1.3s"/>
|
|
<animate attributeName="y" values="254;248;260;252;254" dur="0.5s" repeatCount="indefinite" begin="1.3s"/>
|
|
</rect>
|
|
|
|
<!-- Indicators -->
|
|
<circle cx="242" cy="240" r="4" fill="#22D3EE" opacity="0">
|
|
<animate attributeName="opacity" values="0;1" dur="0.2s" fill="freeze" begin="0.95s"/>
|
|
<animate attributeName="opacity" values="1;0.3;1" dur="0.8s" repeatCount="indefinite" begin="1.2s"/>
|
|
</circle>
|
|
<rect x="254" y="236" width="24" height="4" rx="2" fill="#06B6D4" opacity="0">
|
|
<animate attributeName="opacity" values="0;0.7" dur="0.2s" fill="freeze" begin="1s"/>
|
|
<animate attributeName="width" values="24;12;24;18;24" dur="1s" repeatCount="indefinite" begin="1.3s"/>
|
|
</rect>
|
|
|
|
<!-- Processor pulse -->
|
|
<rect x="206" y="206" width="100" height="100" rx="18" fill="none" stroke="#22D3EE" stroke-width="2" opacity="0">
|
|
<animate attributeName="x" values="206;176" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
<animate attributeName="y" values="206;176" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
<animate attributeName="width" values="100;160" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
<animate attributeName="height" values="100;160" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
<animate attributeName="rx" values="18;28" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
<animate attributeName="opacity" values="0.6;0" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
</rect>
|
|
|
|
<!-- Flashes -->
|
|
<circle cx="150" cy="145" r="2" fill="#22D3EE" opacity="0">
|
|
<animate attributeName="opacity" values="0;0.9;0" dur="3s" repeatCount="indefinite" begin="1s"/>
|
|
</circle>
|
|
<circle cx="362" cy="367" r="2" fill="#22D3EE" opacity="0">
|
|
<animate attributeName="opacity" values="0;0.9;0" dur="3s" repeatCount="indefinite" begin="2s"/>
|
|
</circle>
|
|
</svg>
|