kportal/docs/kportal-logo-dark.svg

<svg width="310" height="150" viewBox="0 0 310 150" xmlns="http://www.w3.org/2000/svg" id="darkLogo">
                <defs>
                    <!-- Simple turbulence for portal edges -->
                    <filter id="portalTurbulence" x="-50%" y="-50%" width="200%" height="200%">
                        <feTurbulence type="fractalNoise" baseFrequency="0.02 0.03" numOctaves="2" result="turbulence" seed="5">
                            <animate attributeName="seed" values="5;10;5" dur="8s" repeatCount="indefinite"/>
                        </feTurbulence>
                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"/>
                    </filter>

                    <!-- Blue glow -->
                    <filter id="blueGlow" x="-50%" y="-50%" width="200%" height="200%">
                        <feGaussianBlur stdDeviation="5" result="coloredBlur"/>
                        <feMerge>
                            <feMergeNode in="coloredBlur"/>
                            <feMergeNode in="SourceGraphic"/>
                        </feMerge>
                    </filter>

                    <!-- Orange glow -->
                    <filter id="orangeGlow" x="-50%" y="-50%" width="200%" height="200%">
                        <feGaussianBlur stdDeviation="5" result="coloredBlur"/>
                        <feMerge>
                            <feMergeNode in="coloredBlur"/>
                            <feMergeNode in="SourceGraphic"/>
                        </feMerge>
                    </filter>

                    <!-- Text glow -->
                    <filter id="textGlow" x="-20%" y="-20%" width="140%" height="140%">
                        <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
                        <feMerge>
                            <feMergeNode in="coloredBlur"/>
                            <feMergeNode in="SourceGraphic"/>
                        </feMerge>
                    </filter>

                    <!-- Gradients -->
                    <radialGradient id="bluePortal" cx="50%" cy="50%">
                        <stop offset="0%" style="stop-color:#000814;stop-opacity:0.9"/>
                        <stop offset="20%" style="stop-color:#001845;stop-opacity:0.8"/>
                        <stop offset="50%" style="stop-color:#0077B6;stop-opacity:0.95"/>
                        <stop offset="80%" style="stop-color:#00B4D8;stop-opacity:1"/>
                        <stop offset="100%" style="stop-color:#90E0EF;stop-opacity:1"/>
                    </radialGradient>

                    <radialGradient id="orangePortal" cx="50%" cy="50%">
                        <stop offset="0%" style="stop-color:#1A0E00;stop-opacity:0.9"/>
                        <stop offset="20%" style="stop-color:#3D2314;stop-opacity:0.8"/>
                        <stop offset="50%" style="stop-color:#F77F00;stop-opacity:0.95"/>
                        <stop offset="80%" style="stop-color:#FCBF49;stop-opacity:1"/>
                        <stop offset="100%" style="stop-color:#FFD6A5;stop-opacity:1"/>
                    </radialGradient>
                </defs>

                <!-- Blue Portal (LEFT) -->
                <g id="bluePortalGroup">
                    <!-- Outer rings -->
                    <ellipse cx="50" cy="75" rx="35" ry="50" fill="none" stroke="#90E0EF" stroke-width="0.5" opacity="0.2"/>
                    <ellipse cx="50" cy="75" rx="30" ry="44" fill="none" stroke="#00B4D8" stroke-width="1" opacity="0.3"/>

                    <!-- Main portal -->
                    <ellipse cx="50" cy="75" rx="26" ry="40" fill="url(#bluePortal)" filter="url(#blueGlow)" opacity="0.95"/>

                    <!-- Inner energy rings -->
                    <ellipse cx="50" cy="75" rx="20" ry="32" fill="none" stroke="#00B4D8" stroke-width="2" opacity="0.7">
                        <animate attributeName="rx" values="20;18;20" dur="3s" repeatCount="indefinite"/>
                        <animate attributeName="ry" values="32;30;32" dur="3s" repeatCount="indefinite"/>
                    </ellipse>
                    <ellipse cx="50" cy="75" rx="14" ry="24" fill="none" stroke="#90E0EF" stroke-width="1.5" opacity="0.5">
                        <animate attributeName="rx" values="14;16;14" dur="2.5s" repeatCount="indefinite"/>
                        <animate attributeName="ry" values="24;26;24" dur="2.5s" repeatCount="indefinite"/>
                    </ellipse>

                    <!-- Portal core -->
                    <ellipse cx="50" cy="75" rx="7" ry="12" fill="#000814" opacity="0.95"/>
                </g>

                <!-- Text: "kportal" -->
                <!-- Orange K -->
                <text x="76" y="90" font-family="'Helvetica Neue', Arial, sans-serif" font-size="52" font-weight="300" fill="#FCBF49" filter="url(#textGlow)">
                    k
                    <animate attributeName="x" values="76;79;76" dur="4s" repeatCount="indefinite"/>
                </text>

                <!-- White "porta" -->
                <text x="105" y="90" font-family="'Helvetica Neue', Arial, sans-serif" font-size="52" font-weight="300" fill="white" filter="url(#textGlow)">
                    porta
                </text>

                <!-- Blue L -->
                <text x="220" y="90" font-family="'Helvetica Neue', Arial, sans-serif" font-size="52" font-weight="300" fill="#00B4D8" filter="url(#textGlow)">
                    l
                    <animate attributeName="x" values="220;223;220" dur="4s" repeatCount="indefinite"/>
                </text>

                <!-- Orange Portal (RIGHT) at x=260 -->
                <g id="orangePortalGroup">
                    <!-- Outer rings -->
                    <ellipse cx="260" cy="75" rx="35" ry="50" fill="none" stroke="#FFD6A5" stroke-width="0.5" opacity="0.2"/>
                    <ellipse cx="260" cy="75" rx="30" ry="44" fill="none" stroke="#FCBF49" stroke-width="1" opacity="0.3"/>

                    <!-- Main portal -->
                    <ellipse cx="260" cy="75" rx="26" ry="40" fill="url(#orangePortal)" filter="url(#orangeGlow)" opacity="0.95"/>

                    <!-- Inner energy rings -->
                    <ellipse cx="260" cy="75" rx="20" ry="32" fill="none" stroke="#FCBF49" stroke-width="2" opacity="0.7">
                        <animate attributeName="rx" values="20;18;20" dur="3s" repeatCount="indefinite"/>
                        <animate attributeName="ry" values="32;30;32" dur="3s" repeatCount="indefinite"/>
                    </ellipse>
                    <ellipse cx="260" cy="75" rx="14" ry="24" fill="none" stroke="#FFD6A5" stroke-width="1.5" opacity="0.5">
                        <animate attributeName="rx" values="14;16;14" dur="2.5s" repeatCount="indefinite"/>
                        <animate attributeName="ry" values="24;26;24" dur="2.5s" repeatCount="indefinite"/>
                    </ellipse>

                    <!-- Portal core -->
                    <ellipse cx="260" cy="75" rx="7" ry="12" fill="#1A0E00" opacity="0.95"/>
                </g>

                <!-- Energy connection between portals -->
                <path d="M 76 75 Q 180 70 222 75" stroke="url(#energyGradient)" stroke-width="0.5" fill="none" opacity="0.3">
                    <animate attributeName="opacity" values="0.1;0.3;0.1" dur="4s" repeatCount="indefinite"/>
                </path>

                <defs>
                    <linearGradient id="energyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" style="stop-color:#00B4D8;stop-opacity:1"/>
                        <stop offset="50%" style="stop-color:#667eea;stop-opacity:1"/>
                        <stop offset="100%" style="stop-color:#FCBF49;stop-opacity:1"/>
                    </linearGradient>
                </defs>
            </svg>