Hermes Bot Avatar

hermes-bot-avatar.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
  <!-- Definitions -->
  <defs>
    <!-- Background gradient -->
    <radialGradient id="bgGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#0a1628"/>
      <stop offset="100%" stop-color="#020812"/>
    </radialGradient>

    <!-- Core glow gradient -->
    <radialGradient id="coreGlow" cx="50%" cy="45%" r="35%">
      <stop offset="0%" stop-color="#4fc3f7" stop-opacity="0.15"/>
      <stop offset="70%" stop-color="#0288d1" stop-opacity="0.05"/>
      <stop offset="100%" stop-color="#0000" stop-opacity="0"/>
    </radialGradient>

    <!-- Primary accent -->
    <linearGradient id="accent1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#4fc3f7"/>
      <stop offset="50%" stop-color="#29b6f6"/>
      <stop offset="100%" stop-color="#0288d1"/>
    </linearGradient>

    <!-- Secondary accent -->
    <linearGradient id="accent2" x1="0%" y1="100%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#00e5ff"/>
      <stop offset="100%" stop-color="#18ffff"/>
    </linearGradient>

    <!-- Glow filter -->
    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="6" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

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

    <!-- Clip path for circle avatar -->
    <clipPath id="circleClip">
      <circle cx="256" cy="256" r="250"/>
    </clipPath>

    <!-- Grid pattern -->
    <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
      <path d="M 24 0 L 0 0 0 24" fill="none" stroke="#1a3050" stroke-width="0.3" stroke-opacity="0.4"/>
    </pattern>
  </defs>

  <!-- Background circle -->
  <circle cx="256" cy="256" r="252" fill="url(#bgGrad)"/>
  <circle cx="256" cy="256" r="252" fill="url(#grid)"/>

  <!-- Outer ring glow -->
  <circle cx="256" cy="256" r="230" fill="none" stroke="#4fc3f7" stroke-width="1" stroke-opacity="0.08" filter="url(#softGlow)"/>

  <!-- Outer ring -->
  <circle cx="256" cy="256" r="230" fill="none" stroke="url(#accent1)" stroke-width="0.8" stroke-opacity="0.2"/>

  <!-- Ring segments - tech-like dashes -->
  <circle cx="256" cy="256" r="230" fill="none" stroke="url(#accent1)" stroke-width="1.5" stroke-opacity="0.35"
    stroke-dasharray="4 16" stroke-dashoffset="0"/>

  <!-- Mid ring -->
  <circle cx="256" cy="256" r="210" fill="none" stroke="#4fc3f7" stroke-width="0.5" stroke-opacity="0.12"
    stroke-dasharray="2 8"/>

  <!-- Core glow area -->
  <circle cx="256" cy="256" r="220" fill="url(#coreGlow)"/>

  <!-- ============ AI HEAD / BUST ============ -->

  <!-- Head shape - geometric polygon silhouette -->
  <!-- Central face/hologram shape -->
  <g filter="url(#glow)">

    <!-- Outer head outline - hexagon-like -->
    <polygon points="256,100 340,155 340,270 310,330 256,370 202,330 172,270 172,155"
      fill="none" stroke="#4fc3f7" stroke-width="0.8" stroke-opacity="0.15"/>

    <!-- Inner geometric head -->
    <polygon points="256,130 318,175 318,265 296,312 256,342 216,312 194,265 194,175"
      fill="none" stroke="#29b6f6" stroke-width="1.5" stroke-opacity="0.4"/>

    <!-- Diamond forehead / third eye area -->
    <polygon points="256,180 280,210 256,240 232,210"
      fill="#4fc3f7" fill-opacity="0.06" stroke="#4fc3f7" stroke-width="1.5" stroke-opacity="0.6"/>

    <!-- Eyes - twin hexagons -->
    <polygon points="220,230 236,224 252,230 252,250 236,256 220,250"
      fill="none" stroke="#00e5ff" stroke-width="1.8" stroke-opacity="0.7"/>
    <polygon points="260,230 276,224 292,230 292,250 276,256 260,250"
      fill="none" stroke="#00e5ff" stroke-width="1.8" stroke-opacity="0.7"/>

    <!-- Eye glow fill -->
    <polygon points="222,231 236,226 250,231 250,249 236,254 222,249"
      fill="#00e5ff" fill-opacity="0.08"/>
    <polygon points="262,231 276,226 290,231 290,249 276,254 262,249"
      fill="#00e5ff" fill-opacity="0.08"/>

    <!-- Eye pupils -->
    <circle cx="236" cy="240" r="4" fill="#00e5ff" fill-opacity="0.9" filter="url(#glow)"/>
    <circle cx="276" cy="240" r="4" fill="#00e5ff" fill-opacity="0.9" filter="url(#glow)"/>

    <!-- Nose line -->
    <line x1="256" y1="240" x2="256" y2="270" stroke="#4fc3f7" stroke-width="0.8" stroke-opacity="0.3"/>

    <!-- Mouth - subtle line -->
    <path d="M 232 282 Q 244 288 256 282 Q 268 288 280 282"
      fill="none" stroke="#4fc3f7" stroke-width="1" stroke-opacity="0.4"/>

    <!-- Jaw line -->
    <path d="M 210 265 Q 210 300 256 330 Q 302 300 302 265"
      fill="none" stroke="#4fc3f7" stroke-width="0.6" stroke-opacity="0.15"/>

    <!-- Neck lines -->
    <line x1="240" y1="340" x2="235" y2="370" stroke="#1a3050" stroke-width="1" stroke-opacity="0.3"/>
    <line x1="256" y1="342" x2="256" y2="375" stroke="#1a3050" stroke-width="1" stroke-opacity="0.3"/>
    <line x1="272" y1="340" x2="277" y2="370" stroke="#1a3050" stroke-width="1" stroke-opacity="0.3"/>
  </g>

  <!-- ============ CIRCUIT / NEURAL LINES ============ -->

  <!-- Neural connection lines from head outward -->
  <g opacity="0.25">
    <!-- Left side connections -->
    <line x1="194" y1="200" x2="120" y2="150" stroke="#4fc3f7" stroke-width="0.5" opacity="0.3"/>
    <line x1="194" y1="240" x2="100" y2="220" stroke="#4fc3f7" stroke-width="0.5" opacity="0.2"/>
    <line x1="210" y1="300" x2="130" y2="320" stroke="#4fc3f7" stroke-width="0.5" opacity="0.2"/>

    <!-- Right side connections -->
    <line x1="318" y1="200" x2="392" y2="150" stroke="#4fc3f7" stroke-width="0.5" opacity="0.3"/>
    <line x1="318" y1="240" x2="412" y2="220" stroke="#4fc3f7" stroke-width="0.5" opacity="0.2"/>
    <line x1="302" y1="300" x2="382" y2="320" stroke="#4fc3f7" stroke-width="0.5" opacity="0.2"/>
  </g>

  <!-- Small nodes on neural lines -->
  <circle cx="140" cy="170" r="2.5" fill="#00e5ff" fill-opacity="0.3"/>
  <circle cx="125" cy="210" r="2" fill="#00e5ff" fill-opacity="0.2"/>
  <circle cx="372" cy="170" r="2.5" fill="#00e5ff" fill-opacity="0.3"/>
  <circle cx="387" cy="210" r="2" fill="#00e5ff" fill-opacity="0.2"/>

  <!-- ============ FLOATING DATA PARTICLES ============ -->

  <!-- Top particles -->
  <circle cx="180" cy="105" r="1.5" fill="#4fc3f7" opacity="0.3"/>
  <circle cx="280" cy="95" r="1" fill="#00e5ff" opacity="0.4"/>
  <circle cx="330" cy="120" r="1.5" fill="#4fc3f7" opacity="0.25"/>
  <circle cx="140" cy="135" r="1" fill="#18ffff" opacity="0.3"/>

  <!-- Bottom particles -->
  <circle cx="170" cy="390" r="1.5" fill="#4fc3f7" opacity="0.2"/>
  <circle cx="340" cy="380" r="1" fill="#00e5ff" opacity="0.25"/>
  <circle cx="300" cy="405" r="1.5" fill="#4fc3f7" opacity="0.15"/>
  <circle cx="200" cy="400" r="1" fill="#18ffff" opacity="0.2"/>

  <!-- ============ DECORATIVE HEXAGON NODES ============ -->

  <!-- Small hex nodes around the head -->
  <polygon points="160,175 168,171 176,175 176,183 168,187 160,183"
    fill="none" stroke="#4fc3f7" stroke-width="0.8" opacity="0.3"/>
  <polygon points="336,175 344,171 352,175 352,183 344,187 336,183"
    fill="none" stroke="#4fc3f7" stroke-width="0.8" opacity="0.3"/>

  <!-- Bottom decorative arc -->
  <path d="M 106 370 Q 256 440 406 370"
    fill="none" stroke="#4fc3f7" stroke-width="0.5" stroke-opacity="0.15"
    stroke-dasharray="3 6"/>

  <!-- Name text at bottom -->
  <text x="256" y="435" text-anchor="middle"
    fill="url(#accent1)" font-family="'Segoe UI', Arial, sans-serif"
    font-size="28" font-weight="600" letter-spacing="8" opacity="0.85">
    HERMES
  </text>

  <!-- Subtle underline for text -->
  <line x1="195" y1="445" x2="317" y2="445"
    stroke="#4fc3f7" stroke-width="0.5" opacity="0.2"/>

  <!-- Small bottom accent dots -->
  <circle cx="220" cy="456" r="1.5" fill="#00e5ff" opacity="0.2"/>
  <circle cx="256" cy="460" r="2" fill="#4fc3f7" opacity="0.15"/>
  <circle cx="292" cy="456" r="1.5" fill="#00e5ff" opacity="0.2"/>

  <!-- ============ PULSE RING (outer decorative) ============ -->

  <!-- Outer dashed ring -->
  <circle cx="256" cy="256" r="240" fill="none"
    stroke="#4fc3f7" stroke-width="0.5" stroke-opacity="0.08"
    stroke-dasharray="1 6"/>

  <!-- Corner bracket ornaments (top-left, top-right, bottom-left, bottom-right) -->
  <!-- Top-left -->
  <path d="M 40 80 L 40 40 L 80 40"
    fill="none" stroke="#4fc3f7" stroke-width="0.5" opacity="0.12"/>
  <!-- Top-right -->
  <path d="M 432 40 L 472 40 L 472 80"
    fill="none" stroke="#4fc3f7" stroke-width="0.5" opacity="0.12"/>
  <!-- Bottom-left -->
  <path d="M 40 432 L 40 472 L 80 472"
    fill="none" stroke="#4fc3f7" stroke-width="0.5" opacity="0.12"/>
  <!-- Bottom-right -->
  <path d="M 432 432 L 472 432 L 472 472"
    fill="none" stroke="#4fc3f7" stroke-width="0.5" opacity="0.12"/>
</svg>