178 lines
10 KiB
XML
178 lines
10 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
|
<defs>
|
|
<linearGradient id="hybridLayerGrad" 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="hybridProcessorGrad" 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="hybridFlowGrad" 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="hybridProcessorGlow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="8" result="coloredBlur">
|
|
<animate attributeName="stdDeviation" values="6;12;6" dur="1.5s" repeatCount="indefinite"/>
|
|
</feGaussianBlur>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="hybridNodeGlow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<!-- Paths for particles -->
|
|
<path id="hybridPathIn1" d="M110 155 Q110 195 170 220 Q220 245 220 256" fill="none"/>
|
|
<path id="hybridPathIn2" d="M402 155 Q402 195 342 220 Q292 245 292 256" fill="none"/>
|
|
<path id="hybridPathOut1" d="M220 256 Q220 267 170 292 Q110 317 110 357" fill="none"/>
|
|
<path id="hybridPathOut2" d="M292 256 Q292 267 342 292 Q402 317 402 357" fill="none"/>
|
|
</defs>
|
|
|
|
<!-- Upper layer (V1 style) -->
|
|
<rect x="80" y="115" width="352" height="48" rx="10" fill="url(#hybridLayerGrad)" 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>
|
|
|
|
<!-- Middle layer (V1 style) -->
|
|
<rect x="80" y="232" width="352" height="48" rx="10" fill="url(#hybridLayerGrad)" opacity="0">
|
|
<animate attributeName="opacity" values="0;1" dur="0.4s" fill="freeze" begin="0.15s"/>
|
|
</rect>
|
|
|
|
<!-- Lower layer (V1 style) -->
|
|
<rect x="80" y="349" width="352" height="48" rx="10" fill="url(#hybridLayerGrad)" 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>
|
|
|
|
<!-- Curved connection flows (V5 style) -->
|
|
<path d="M130 163 Q130 200 190 230 Q230 250 230 256" stroke="url(#hybridFlowGrad)" stroke-width="4" fill="none" opacity="0" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0;0.65" dur="0.3s" fill="freeze" begin="0.5s"/>
|
|
</path>
|
|
<path d="M382 163 Q382 200 322 230 Q282 250 282 256" stroke="url(#hybridFlowGrad)" stroke-width="4" fill="none" opacity="0" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0;0.65" dur="0.3s" fill="freeze" begin="0.6s"/>
|
|
</path>
|
|
<path d="M230 256 Q230 262 190 282 Q130 312 130 349" stroke="url(#hybridFlowGrad)" stroke-width="4" fill="none" opacity="0" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0;0.65" dur="0.3s" fill="freeze" begin="0.7s"/>
|
|
</path>
|
|
<path d="M282 256 Q282 262 322 282 Q382 312 382 349" stroke="url(#hybridFlowGrad)" stroke-width="4" fill="none" opacity="0" stroke-linecap="round">
|
|
<animate attributeName="opacity" values="0;0.65" dur="0.3s" fill="freeze" begin="0.8s"/>
|
|
</path>
|
|
|
|
<!-- Incoming data particles -->
|
|
<circle r="6" fill="#22D3EE" filter="url(#hybridNodeGlow)">
|
|
<animateMotion dur="1.3s" repeatCount="indefinite" begin="1.3s">
|
|
<mpath href="#hybridPathIn1"/>
|
|
</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(#hybridNodeGlow)">
|
|
<animateMotion dur="1.3s" repeatCount="indefinite" begin="1.7s">
|
|
<mpath href="#hybridPathIn2"/>
|
|
</animateMotion>
|
|
<animate attributeName="opacity" values="1;0.6;0.2" dur="1.3s" repeatCount="indefinite" begin="1.7s"/>
|
|
</circle>
|
|
|
|
<!-- Outgoing data particles -->
|
|
<circle r="5" fill="#6366F1">
|
|
<animateMotion dur="1.3s" repeatCount="indefinite" begin="2s">
|
|
<mpath href="#hybridPathOut1"/>
|
|
</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="#hybridPathOut2"/>
|
|
</animateMotion>
|
|
<animate attributeName="opacity" values="0.2;0.6;1" dur="1.3s" repeatCount="indefinite" begin="2.3s"/>
|
|
</circle>
|
|
|
|
<!-- Input points (cyan) -->
|
|
<circle cx="130" cy="139" r="0" fill="#22D3EE" filter="url(#hybridNodeGlow)">
|
|
<animate attributeName="r" values="0;10" dur="0.25s" fill="freeze" begin="0.2s"/>
|
|
<animate attributeName="r" values="9;12;9" dur="2s" repeatCount="indefinite" begin="1.2s"/>
|
|
</circle>
|
|
<circle cx="382" cy="139" r="0" fill="#22D3EE" filter="url(#hybridNodeGlow)">
|
|
<animate attributeName="r" values="0;10" dur="0.25s" fill="freeze" begin="0.25s"/>
|
|
<animate attributeName="r" values="10;9;10" dur="2s" repeatCount="indefinite" begin="1.2s"/>
|
|
</circle>
|
|
|
|
<!-- Output points (indigo) -->
|
|
<circle cx="130" cy="373" r="0" fill="#6366F1" filter="url(#hybridNodeGlow)">
|
|
<animate attributeName="r" values="0;10" dur="0.25s" fill="freeze" begin="0.35s"/>
|
|
<animate attributeName="r" values="9;12;9" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
</circle>
|
|
<circle cx="382" cy="373" r="0" fill="#6366F1" filter="url(#hybridNodeGlow)">
|
|
<animate attributeName="r" values="0;10" dur="0.25s" fill="freeze" begin="0.4s"/>
|
|
<animate attributeName="r" values="10;9;10" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
</circle>
|
|
|
|
<!-- ═══════════════════════════════════════════════ -->
|
|
<!-- CENTRAL PROCESSOR (V5 style) -->
|
|
<!-- ═══════════════════════════════════════════════ -->
|
|
|
|
<!-- External processor box with glow -->
|
|
<rect x="206" y="206" width="100" height="100" rx="18" fill="url(#hybridProcessorGrad)" filter="url(#hybridProcessorGlow)" opacity="0">
|
|
<animate attributeName="opacity" values="0;1" dur="0.4s" fill="freeze" begin="0.45s"/>
|
|
</rect>
|
|
|
|
<!-- White inner box -->
|
|
<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>
|
|
|
|
<!-- Processing indicators (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>
|
|
|
|
<!-- Small status indicator (blinking dot) -->
|
|
<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>
|
|
|
|
<!-- Active connection indicator -->
|
|
<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>
|
|
|
|
<!-- ═══════════════════════════════════════════════ -->
|
|
<!-- ADDITIONAL EFFECTS -->
|
|
<!-- ═══════════════════════════════════════════════ -->
|
|
|
|
<!-- Pulse from the processor -->
|
|
<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.5;0" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
</rect>
|
|
</svg>
|