phantom-logo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHANTOM — Hoodie Hacker Logo</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: #050510;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .container { text-align: center; }
</style>
</head>
<body>
<div class="container">

<!-- ===== PHANTOM HOODIE HACKER LOGO ===== -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 520" width="600" height="780">

  <defs>
    <!-- Gradients -->
    <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#020208"/>
      <stop offset="50%" stop-color="#080820"/>
      <stop offset="100%" stop-color="#020208"/>
    </linearGradient>

    <linearGradient id="hoodieGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#1a1040" stop-opacity="0.4"/>
      <stop offset="50%" stop-color="#0d0d2b" stop-opacity="0.7"/>
      <stop offset="100%" stop-color="#060620" stop-opacity="0.9"/>
    </linearGradient>

    <linearGradient id="hoodieEdge" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#8b5cf6"/>
      <stop offset="30%" stop-color="#6c3cf0"/>
      <stop offset="70%" stop-color="#4c1d95"/>
      <stop offset="100%" stop-color="#2e1065"/>
    </linearGradient>

    <linearGradient id="eyeGradL" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#c084fc" stop-opacity="0.2"/>
      <stop offset="50%" stop-color="#d946ef"/>
      <stop offset="100%" stop-color="#a855f7" stop-opacity="0.8"/>
    </linearGradient>

    <linearGradient id="eyeGradR" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#a855f7" stop-opacity="0.8"/>
      <stop offset="50%" stop-color="#d946ef"/>
      <stop offset="100%" stop-color="#c084fc" stop-opacity="0.2"/>
    </linearGradient>

    <linearGradient id="textGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#c084fc"/>
      <stop offset="30%" stop-color="#a855f7"/>
      <stop offset="70%" stop-color="#8b5cf6"/>
      <stop offset="100%" stop-color="#6c3cf0"/>
    </linearGradient>

    <linearGradient id="zipGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#8b5cf6" stop-opacity="0"/>
      <stop offset="30%" stop-color="#6c3cf0" stop-opacity="0.3"/>
      <stop offset="70%" stop-color="#6c3cf0" stop-opacity="0.2"/>
      <stop offset="100%" stop-color="#8b5cf6" stop-opacity="0"/>
    </linearGradient>

    <!-- Glow filters -->
    <filter id="eyeGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="5" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <filter id="eyeGlowStrong" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="12" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <filter id="circuitGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="2" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <filter id="hoodGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="3"/>
    </filter>

    <!-- Hexagon grid pattern -->
    <pattern id="hexGrid" x="0" y="0" width="60" height="103.92" patternUnits="userSpaceOnUse">
      <path d="M30 0 L60 17.32 L60 51.96 L30 69.28 L0 51.96 L0 17.32 Z" 
            fill="none" stroke="#8b5cf6" stroke-width="0.5" stroke-opacity="0.06"/>
      <path d="M30 103.92 L60 86.6 L60 51.96 L30 69.28 L0 51.96 L0 86.6 Z" 
            fill="none" stroke="#8b5cf6" stroke-width="0.5" stroke-opacity="0.06"/>
    </pattern>
  </defs>

  <!-- Background -->
  <rect width="400" height="520" fill="url(#bgGrad)"/>

  <!-- Hex grid overlay -->
  <rect width="400" height="420" fill="url(#hexGrid)" opacity="0.4"/>

  <!-- Scanning line effect -->
  <g opacity="0.04">
    <line x1="0" y1="0" x2="400" y2="0" stroke="#d946ef" stroke-width="1.5">
      <animate attributeName="y1" values="0;520;0" dur="8s" repeatCount="indefinite"/>
      <animate attributeName="y2" values="0;520;0" dur="8s" repeatCount="indefinite"/>
    </line>
  </g>

  <!-- ===== DATA STREAMS ===== -->
  <g opacity="0.15">
    <line x1="30" y1="120" x2="30" y2="380" stroke="#8b5cf6" stroke-width="0.5" stroke-dasharray="4 8">
      <animate attributeName="stroke-dashoffset" values="0;-24" dur="2s" repeatCount="indefinite"/>
    </line>
    <line x1="370" y1="100" x2="370" y2="360" stroke="#8b5cf6" stroke-width="0.5" stroke-dasharray="4 8">
      <animate attributeName="stroke-dashoffset" values="0;-24" dur="2.5s" repeatCount="indefinite"/>
    </line>
    <line x1="20" y1="200" x2="380" y2="200" stroke="#6c3cf0" stroke-width="0.3" stroke-dasharray="2 6" opacity="0.3">
      <animate attributeName="stroke-dashoffset" values="0;-16" dur="3s" repeatCount="indefinite"/>
    </line>
  </g>

  <!-- ===== HOODIE OUTER GLOW ===== -->
  <path d="M200 28 C110 28 60 65 40 130 C25 180 30 220 45 250 L55 270 
           C65 275 75 280 80 295 L70 350 L30 380 L30 400 
           L370 400 L370 380 L330 350 L320 295 
           C325 280 335 275 345 270 L355 250 
           C370 220 375 180 360 130 C340 65 290 28 200 28 Z" 
        fill="none" stroke="#8b5cf6" stroke-width="1" stroke-opacity="0.08" 
        filter="url(#hoodGlow)"/>

  <!-- ===== HOODIE SILHOUETTE ===== -->
  <g>
    <!-- Hoodie body (torso) -->
    <path d="M30 380 L30 400 L370 400 L370 380 L330 350 L320 295 
             C325 280 335 275 345 270 L355 250 L340 240 L330 255 L315 260 
             L290 265 L270 270 L260 275 L250 280 L240 282 L200 285 L160 282 
             L150 280 L140 275 L130 270 L110 265 L85 260 L70 255 L60 240 
             L45 250 L55 270 C65 275 75 280 80 295 L70 350 Z" 
          fill="url(#hoodieGrad)" stroke="url(#hoodieEdge)" stroke-width="1.5" 
          stroke-linejoin="round" opacity="0.9"/>

    <!-- Hood/cowl framing the face -->
    <path d="M200 28 C110 28 60 65 40 130 C25 180 30 220 45 250 
             L60 240 L70 255 L85 260 L105 265 L115 260 L130 250 L145 245 
             L160 242 L175 240 L200 238 L225 240 L240 242 L255 245 
             L270 250 L285 260 L295 265 L315 260 L330 255 L340 240 
             L355 250 C370 220 375 180 360 130 C340 65 290 28 200 28 Z" 
          fill="none" stroke="url(#hoodieEdge)" stroke-width="2" 
          stroke-linejoin="round" opacity="0.6"/>

    <!-- Hood fill (translucent) -->
    <path d="M200 30 C120 30 70 65 50 125 C38 165 38 200 48 240 
             L60 238 L65 248 L78 255 L95 258 L110 253 L125 245 L140 240 
             L160 236 L180 233 L200 231 L220 233 L240 236 L260 240 
             L275 245 L290 253 L305 258 L322 255 L335 248 L340 238 
             L352 240 C362 200 362 165 350 125 C330 65 280 30 200 30 Z" 
          fill="#1a1040" fill-opacity="0.5" stroke="none"/>

    <!-- Hood fold lines -->
    <g stroke="#8b5cf6" stroke-width="0.5" stroke-opacity="0.08" fill="none">
      <path d="M200 40 Q180 55 170 80"/>
      <path d="M200 40 Q220 55 230 80"/>
      <path d="M160 60 Q140 80 135 110"/>
      <path d="M240 60 Q260 80 265 110"/>
    </g>
  </g>

  <!-- ===== INNER FACE VOID ===== -->
  <path d="M130 150 C120 170 115 200 125 225 
           C135 250 155 265 175 268 L200 272 L225 268 
           C245 265 265 250 275 225 C285 200 280 170 270 150 
           C255 138 230 132 200 130 C170 132 145 138 130 150 Z" 
        fill="#040412" stroke="#6c3cf0" stroke-width="0.6" stroke-opacity="0.25"/>

  <!-- Trace lines on face -->
  <g stroke="#6c3cf0" stroke-width="0.4" stroke-opacity="0.1" fill="none">
    <line x1="140" y1="155" x2="155" y2="170"/>
    <line x1="260" y1="155" x2="245" y2="170"/>
    <line x1="155" y1="175" x2="200" y2="185"/>
    <line x1="245" y1="175" x2="200" y2="185"/>
    <circle cx="200" cy="185" r="1.5" fill="#6c3cf0" stroke="none"/>
  </g>

  <!-- ===== GLOWING EYES ===== -->

  <!-- Left eye -->
  <g filter="url(#eyeGlow)">
    <ellipse cx="155" cy="180" rx="15" ry="4" fill="#d946ef" opacity="0.1" filter="url(#eyeGlowStrong)"/>
    <path d="M138 180 L145 176 L158 176 L165 180 L158 184 L145 184 Z" 
          fill="url(#eyeGradL)" stroke="#e879f9" stroke-width="0.4"/>
    <path d="M143 179 L157 179 L160 180 L157 181 L143 181 Z" 
          fill="#f0e6ff" opacity="0.5"/>
  </g>

  <!-- Right eye -->
  <g filter="url(#eyeGlow)">
    <ellipse cx="245" cy="180" rx="15" ry="4" fill="#d946ef" opacity="0.1" filter="url(#eyeGlowStrong)"/>
    <path d="M235 180 L242 176 L255 176 L262 180 L255 184 L242 184 Z" 
          fill="url(#eyeGradR)" stroke="#e879f9" stroke-width="0.4"/>
    <path d="M240 179 L255 179 L257 180 L255 181 L240 181 Z" 
          fill="#f0e6ff" opacity="0.5"/>
  </g>

  <!-- Eye-to-eye neural bridge -->
  <g stroke="#a855f7" stroke-width="0.4" stroke-opacity="0.12" fill="none">
    <path d="M165 182 Q180 175 200 178 Q220 175 235 182"/>
    <path d="M165 178 Q180 185 200 182 Q220 185 235 178"/>
    <circle cx="200" cy="178" r="1" fill="#c084fc" stroke="none"/>
    <circle cx="200" cy="182" r="0.8" fill="#c084fc" stroke="none"/>
  </g>

  <!-- ===== HOODIE CYBER DETAILS ===== -->

  <!-- Zipper line -->
  <line x1="200" y1="260" x2="200" y2="395" stroke="url(#zipGrad)" stroke-width="1.2"/>

  <!-- Chest pocket / terminal screen -->
  <rect x="165" y="300" width="70" height="28" rx="3" ry="3" 
        fill="#060620" fill-opacity="0.5" stroke="#6c3cf0" stroke-width="0.5" stroke-opacity="0.2"/>
  <text x="170" y="318" fill="#d946ef" font-family="'Courier New', monospace" font-size="8" 
        letter-spacing="2" opacity="0.4">~ $ whoami</text>

  <!-- Hoodie pocket stripe -->
  <path d="M120 350 Q200 340 280 350" fill="none" stroke="#6c3cf0" stroke-width="0.4" stroke-opacity="0.12"/>

  <!-- Circuit traces running down hoodie body -->
  <g stroke="#8b5cf6" stroke-width="0.6" fill="none" stroke-opacity="0.2" filter="url(#circuitGlow)">
    <path d="M80 295 L80 310 L85 320 L85 340"/>
    <path d="M75 315 L90 315"/>
    <path d="M320 295 L320 310 L315 320 L315 340"/>
    <path d="M325 315 L310 315"/>
    <circle cx="80" cy="295" r="1.5" fill="#c084fc" stroke="none"/>
    <circle cx="320" cy="295" r="1.5" fill="#c084fc" stroke="none"/>
  </g>

  <!-- Side hoodie drawstrings -->
  <g stroke="#8b5cf6" stroke-width="0.4" stroke-opacity="0.12">
    <path d="M145 245 Q140 255 142 270" fill="none"/>
    <path d="M255 245 Q260 255 258 270" fill="none"/>
    <circle cx="142" cy="270" r="1" fill="#a855f7" stroke="none"/>
    <circle cx="258" cy="270" r="1" fill="#a855f7" stroke="none"/>
  </g>

  <!-- Neural shoulder nodes -->
  <g opacity="0.15">
    <circle cx="65" cy="265" r="2" fill="#a855f7"/>
    <circle cx="335" cy="265" r="2" fill="#a855f7"/>
  </g>

  <!-- ===== TYPOGRAPHY ===== -->

  <!-- Subtitle -->
  <text x="200" y="440" text-anchor="middle" 
        fill="#6c3cf0" font-family="'Courier New', monospace" font-size="11" 
        letter-spacing="8" opacity="0.4">CYBERSECURITY · AI</text>

  <!-- PHANTOM wordmark -->
  <text x="200" y="470" text-anchor="middle" 
        fill="url(#textGrad)" font-family="'Arial Black', 'Helvetica Neue', Arial, sans-serif" 
        font-size="42" font-weight="900" letter-spacing="14">
    PHANTOM
  </text>

  <!-- Underline -->
  <line x1="80" y1="485" x2="320" y2="485" 
        stroke="url(#textGrad)" stroke-width="1" opacity="0.25"
        filter="url(#circuitGlow)"/>

  <!-- Tagline -->
  <text x="200" y="505" text-anchor="middle" 
        fill="#94a3b8" font-family="'Courier New', monospace" font-size="10" 
        letter-spacing="6" opacity="0.3">v0.2.0 /* autonomous cyber AI */</text>

</svg>

</div>
</body>
</html>