57 lines
2.6 KiB
XML
57 lines
2.6 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 32" width="100%" height="32">
|
|
<defs>
|
|
<linearGradient id="divider-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#00F0FF" stop-opacity="0"/>
|
|
<stop offset="25%" stop-color="#00F0FF" stop-opacity="0.3"/>
|
|
<stop offset="50%" stop-color="#8B5CF6" stop-opacity="0.9"/>
|
|
<stop offset="75%" stop-color="#C084FC" stop-opacity="0.3"/>
|
|
<stop offset="100%" stop-color="#00F0FF" stop-opacity="0"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="laser-pulse" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#00F0FF" stop-opacity="0"/>
|
|
<stop offset="50%" stop-color="#00F0FF" stop-opacity="1"/>
|
|
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
|
</linearGradient>
|
|
|
|
<filter id="laser-glow" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="32">
|
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<style>
|
|
@keyframes laserDash {
|
|
0% { stroke-dashoffset: 240; }
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
@keyframes coreDiamondPulse {
|
|
0%, 100% { transform: scale(1) rotate(45deg); opacity: 0.8; }
|
|
50% { transform: scale(1.3) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 6px #00F0FF); }
|
|
}
|
|
@keyframes ringPulse {
|
|
0% { r: 4; opacity: 0.9; }
|
|
100% { r: 14; opacity: 0; }
|
|
}
|
|
|
|
.laser-line { stroke-dasharray: 20 60; animation: laserDash 2.5s linear infinite; }
|
|
.diamond-center { transform-origin: 600px 16px; animation: coreDiamondPulse 2.4s ease-in-out infinite; }
|
|
.signal-wave { transform-origin: 600px 16px; animation: ringPulse 2.4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite; }
|
|
</style>
|
|
|
|
<!-- Background Base Track -->
|
|
<line x1="100" y1="16" x2="1100" y2="16" stroke="url(#divider-grad)" stroke-width="1.5" stroke-opacity="0.4"/>
|
|
|
|
<!-- Animated Laser Beams -->
|
|
<line x1="150" y1="16" x2="570" y2="16" stroke="url(#laser-pulse)" stroke-width="2.5" class="laser-line" filter="url(#laser-glow)"/>
|
|
<line x1="630" y1="16" x2="1050" y2="16" stroke="url(#laser-pulse)" stroke-width="2.5" class="laser-line" filter="url(#laser-glow)"/>
|
|
|
|
<!-- Central Tachyon Diamond Core -->
|
|
<circle cx="600" cy="16" r="4" fill="none" stroke="#00F0FF" stroke-width="1.5" class="signal-wave"/>
|
|
<rect x="595" y="11" width="10" height="10" rx="1.5" fill="#0F172A" stroke="#00F0FF" stroke-width="1.5" class="diamond-center"/>
|
|
<circle cx="600" cy="16" r="2.5" fill="#C084FC" filter="url(#laser-glow)"/>
|
|
</svg>
|