snakebridge

<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Premium gradient backgrounds -->
    <linearGradient id="hexBg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#1a0a2e"/>
      <stop offset="35%" stop-color="#16213e"/>
      <stop offset="70%" stop-color="#0f3460"/>
      <stop offset="100%" stop-color="#1a1a2e"/>
    </linearGradient>
    
    <linearGradient id="hexBorder" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#a855f7"/>
      <stop offset="25%" stop-color="#7c3aed"/>
      <stop offset="50%" stop-color="#6366f1"/>
      <stop offset="75%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#06b6d4"/>
    </linearGradient>
    
    <linearGradient id="innerHexGlow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#c084fc" stop-opacity="0.3"/>
      <stop offset="50%" stop-color="#818cf8" stop-opacity="0.1"/>
      <stop offset="100%" stop-color="#22d3ee" stop-opacity="0.3"/>
    </linearGradient>
    
    <!-- Snake body gradient -->
    <linearGradient id="snakeBody" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#10b981"/>
      <stop offset="20%" stop-color="#059669"/>
      <stop offset="40%" stop-color="#047857"/>
      <stop offset="60%" stop-color="#065f46"/>
      <stop offset="80%" stop-color="#047857"/>
      <stop offset="100%" stop-color="#10b981"/>
    </linearGradient>
    
    <linearGradient id="snakeHighlight" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#34d399" stop-opacity="0.9"/>
      <stop offset="50%" stop-color="#10b981" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#059669" stop-opacity="0.1"/>
    </linearGradient>
    
    <linearGradient id="snakeUnderbelly" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#fef9c3" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#fde047" stop-opacity="0.3"/>
    </linearGradient>
    
    <!-- Bridge gradient -->
    <linearGradient id="bridgeMain" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#78716c"/>
      <stop offset="30%" stop-color="#57534e"/>
      <stop offset="70%" stop-color="#44403c"/>
      <stop offset="100%" stop-color="#292524"/>
    </linearGradient>
    
    <linearGradient id="bridgeStone" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#a8a29e"/>
      <stop offset="50%" stop-color="#78716c"/>
      <stop offset="100%" stop-color="#57534e"/>
    </linearGradient>
    
    <linearGradient id="bridgeShadow" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#1c1917" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#0c0a09" stop-opacity="0.9"/>
    </linearGradient>
    
    <!-- Water gradient -->
    <linearGradient id="water" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#0891b2" stop-opacity="0.8"/>
      <stop offset="25%" stop-color="#0e7490" stop-opacity="0.6"/>
      <stop offset="50%" stop-color="#155e75" stop-opacity="0.7"/>
      <stop offset="75%" stop-color="#0e7490" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#0891b2" stop-opacity="0.8"/>
    </linearGradient>
    
    <linearGradient id="waterHighlight" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#67e8f9" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#22d3ee" stop-opacity="0"/>
    </linearGradient>
    
    <!-- Glow effects -->
    <radialGradient id="centerGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#a78bfa" stop-opacity="0.15"/>
      <stop offset="50%" stop-color="#6366f1" stop-opacity="0.05"/>
      <stop offset="100%" stop-color="#1e1b4b" stop-opacity="0"/>
    </radialGradient>
    
    <radialGradient id="snakeEyeGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fef08a"/>
      <stop offset="60%" stop-color="#facc15"/>
      <stop offset="100%" stop-color="#eab308"/>
    </radialGradient>
    
    <!-- Advanced filters -->
    <filter id="outerGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
      <feColorMatrix in="blur" type="matrix" 
        values="0.4 0 0 0 0.4
                0 0.2 0 0 0.2
                0 0 0.8 0 0.9
                0 0 0 1 0" result="colorBlur"/>
      <feMerge>
        <feMergeNode in="colorBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    
    <filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feOffset dx="0" dy="2"/>
      <feGaussianBlur stdDeviation="3" result="offset-blur"/>
      <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
      <feFlood flood-color="#000" flood-opacity="0.4" result="color"/>
      <feComposite operator="in" in="color" in2="inverse" result="shadow"/>
      <feComposite operator="over" in="shadow" in2="SourceGraphic"/>
    </filter>
    
    <filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
      <feOffset dx="2" dy="4" result="offsetblur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.6"/>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    
    <filter id="textGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    
    <filter id="snakeGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
      <feOffset dx="0" dy="0" result="offsetblur"/>
      <feFlood flood-color="#10b981" flood-opacity="0.5"/>
      <feComposite in2="offsetblur" operator="in"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    
    <filter id="waterRipple" x="-10%" y="-10%" width="120%" height="120%">
      <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" result="noise"/>
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
    
    <!-- Patterns -->
    <pattern id="scalePattern" x="0" y="0" width="12" height="8" patternUnits="userSpaceOnUse">
      <ellipse cx="6" cy="4" rx="5" ry="3.5" fill="none" stroke="#065f46" stroke-width="0.5" opacity="0.6"/>
    </pattern>
    
    <pattern id="stoneTexture" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect width="20" height="20" fill="#57534e"/>
      <circle cx="3" cy="5" r="1" fill="#78716c" opacity="0.5"/>
      <circle cx="12" cy="8" r="0.8" fill="#44403c" opacity="0.4"/>
      <circle cx="7" cy="15" r="1.2" fill="#78716c" opacity="0.3"/>
      <circle cx="16" cy="3" r="0.6" fill="#44403c" opacity="0.5"/>
      <circle cx="18" cy="17" r="0.9" fill="#78716c" opacity="0.4"/>
    </pattern>
    
    <!-- Clip paths -->
    <clipPath id="hexClip">
      <path d="M 256 30 L 452 143 L 452 369 L 256 482 L 60 369 L 60 143 Z"/>
    </clipPath>
    
    <clipPath id="innerHexClip">
      <path d="M 256 50 L 432 153 L 432 359 L 256 462 L 80 359 L 80 153 Z"/>
    </clipPath>
  </defs>
  
  <!-- Outer glow layer -->
  <path d="M 256 20 L 462 138 L 462 374 L 256 492 L 50 374 L 50 138 Z"
        fill="none" stroke="url(#hexBorder)" stroke-width="4" opacity="0.3"
        filter="url(#outerGlow)"/>
  
  <!-- Main hexagon background -->
  <path d="M 256 30 L 452 143 L 452 369 L 256 482 L 60 369 L 60 143 Z"
        fill="url(#hexBg)" filter="url(#innerShadow)"/>
  
  <!-- Hexagon border with gradient -->
  <path d="M 256 30 L 452 143 L 452 369 L 256 482 L 60 369 L 60 143 Z"
        fill="none" stroke="url(#hexBorder)" stroke-width="6"/>
  
  <!-- Inner hexagon accent -->
  <path d="M 256 50 L 432 153 L 432 359 L 256 462 L 80 359 L 80 153 Z"
        fill="url(#innerHexGlow)" stroke="url(#hexBorder)" stroke-width="1" opacity="0.5"/>
  
  <!-- Center ambient glow -->
  <ellipse cx="256" cy="280" rx="180" ry="120" fill="url(#centerGlow)"/>
  
  <!-- Clipped content area -->
  <g clip-path="url(#innerHexClip)">
    
    <!-- Water base layer -->
    <ellipse cx="256" cy="340" rx="200" ry="45" fill="url(#water)" filter="url(#waterRipple)"/>
    <ellipse cx="256" cy="335" rx="180" ry="25" fill="url(#waterHighlight)" opacity="0.4"/>
    
    <!-- Water ripple details -->
    <ellipse cx="200" cy="345" rx="40" ry="8" fill="none" stroke="#67e8f9" stroke-width="0.5" opacity="0.4"/>
    <ellipse cx="300" cy="350" rx="35" ry="6" fill="none" stroke="#67e8f9" stroke-width="0.5" opacity="0.3"/>
    <ellipse cx="256" cy="338" rx="60" ry="10" fill="none" stroke="#22d3ee" stroke-width="0.8" opacity="0.5"/>
    
    <!-- Bridge structure -->
    <g filter="url(#dropShadow)">
      <!-- Bridge arch shadow -->
      <ellipse cx="256" cy="310" rx="110" ry="50" fill="url(#bridgeShadow)" transform="translate(0, 30)"/>
      
      <!-- Left bridge pillar -->
      <g>
        <rect x="130" y="270" width="35" height="100" fill="url(#bridgeMain)" rx="3"/>
        <rect x="130" y="270" width="35" height="100" fill="url(#stoneTexture)" opacity="0.4" rx="3"/>
        <!-- Pillar stone details -->
        <line x1="130" y1="290" x2="165" y2="290" stroke="#44403c" stroke-width="2"/>
        <line x1="130" y1="320" x2="165" y2="320" stroke="#44403c" stroke-width="2"/>
        <line x1="130" y1="350" x2="165" y2="350" stroke="#44403c" stroke-width="2"/>
        <!-- Pillar highlight -->
        <rect x="132" y="272" width="5" height="96" fill="#a8a29e" opacity="0.3" rx="1"/>
        <!-- Pillar cap -->
        <rect x="125" y="265" width="45" height="10" fill="url(#bridgeStone)" rx="2"/>
      </g>
      
      <!-- Right bridge pillar -->
      <g>
        <rect x="347" y="270" width="35" height="100" fill="url(#bridgeMain)" rx="3"/>
        <rect x="347" y="270" width="35" height="100" fill="url(#stoneTexture)" opacity="0.4" rx="3"/>
        <!-- Pillar stone details -->
        <line x1="347" y1="290" x2="382" y2="290" stroke="#44403c" stroke-width="2"/>
        <line x1="347" y1="320" x2="382" y2="320" stroke="#44403c" stroke-width="2"/>
        <line x1="347" y1="350" x2="382" y2="350" stroke="#44403c" stroke-width="2"/>
        <!-- Pillar highlight -->
        <rect x="349" y="272" width="5" height="96" fill="#a8a29e" opacity="0.3" rx="1"/>
        <!-- Pillar cap -->
        <rect x="342" y="265" width="45" height="10" fill="url(#bridgeStone)" rx="2"/>
      </g>
      
      <!-- Bridge arch -->
      <path d="M 125 270 
               Q 147 270 165 260
               Q 200 230 256 215
               Q 312 230 347 260
               Q 365 270 387 270
               L 387 280
               Q 365 280 347 270
               Q 312 245 256 235
               Q 200 245 165 270
               Q 147 280 125 280
               Z"
            fill="url(#bridgeStone)"/>
      
      <!-- Bridge arch stone details -->
      <path d="M 165 260 Q 200 230 256 215 Q 312 230 347 260"
            fill="none" stroke="#44403c" stroke-width="3"/>
      <path d="M 175 252 Q 215 228 256 218 Q 297 228 337 252"
            fill="none" stroke="#78716c" stroke-width="1.5" opacity="0.6"/>
      
      <!-- Arch keystone -->
      <path d="M 246 215 L 256 205 L 266 215 L 266 225 L 246 225 Z" fill="#a8a29e"/>
      <path d="M 248 217 L 256 209 L 264 217" fill="none" stroke="#57534e" stroke-width="1"/>
      
      <!-- Bridge railing posts -->
      <rect x="175" y="240" width="4" height="20" fill="#78716c" rx="1"/>
      <rect x="205" y="225" width="4" height="20" fill="#78716c" rx="1"/>
      <rect x="235" y="215" width="4" height="20" fill="#78716c" rx="1"/>
      <rect x="265" y="215" width="4" height="20" fill="#78716c" rx="1"/>
      <rect x="295" y="225" width="4" height="20" fill="#78716c" rx="1"/>
      <rect x="325" y="240" width="4" height="20" fill="#78716c" rx="1"/>
      
      <!-- Bridge railing -->
      <path d="M 175 242 Q 215 218 256 210 Q 297 218 337 242"
            fill="none" stroke="#a8a29e" stroke-width="2"/>
    </g>
    
    <!-- Snake body - main curved form acting as bridge deck -->
    <g filter="url(#snakeGlow)">
      <!-- Snake body base -->
      <path d="M 100 300
               C 120 280 140 260 165 250
               Q 200 230 256 220
               Q 312 230 347 250
               C 372 260 392 280 412 300
               C 430 320 440 340 420 355
               C 400 370 370 360 350 345
               C 320 325 290 310 256 310
               C 222 310 192 325 162 345
               C 142 360 112 370 92 355
               C 72 340 82 320 100 300
               Z"
            fill="url(#snakeBody)"/>
      
      <!-- Snake scales overlay -->
      <path d="M 100 300
               C 120 280 140 260 165 250
               Q 200 230 256 220
               Q 312 230 347 250
               C 372 260 392 280 412 300
               C 430 320 440 340 420 355
               C 400 370 370 360 350 345
               C 320 325 290 310 256 310
               C 222 310 192 325 162 345
               C 142 360 112 370 92 355
               C 72 340 82 320 100 300
               Z"
            fill="url(#scalePattern)" opacity="0.5"/>
      
      <!-- Snake body highlight -->
      <path d="M 110 295
               C 128 277 145 260 167 252
               Q 200 235 256 227
               Q 312 235 345 252
               C 367 260 384 277 402 295"
            fill="none" stroke="url(#snakeHighlight)" stroke-width="12" stroke-linecap="round" opacity="0.7"/>
      
      <!-- Snake underbelly accent -->
      <path d="M 105 310
               C 125 330 155 340 190 335
               Q 223 330 256 330
               Q 289 330 322 335
               C 357 340 387 330 407 310"
            fill="none" stroke="url(#snakeUnderbelly)" stroke-width="8" stroke-linecap="round" opacity="0.4"/>
      
      <!-- Detailed scales on top -->
      <g opacity="0.6">
        <ellipse cx="170" cy="255" rx="8" ry="5" fill="none" stroke="#047857" stroke-width="0.8"/>
        <ellipse cx="190" cy="245" rx="8" ry="5" fill="none" stroke="#047857" stroke-width="0.8"/>
        <ellipse cx="210" cy="237" rx="8" ry="5" fill="none" stroke="#047857" stroke-width="0.8"/>
        <ellipse cx="230" cy="230" rx="8" ry="5" fill="none" stroke="#047857" stroke-width="0.8"/>
        <ellipse cx="256" cy="227" rx="8" ry="5" fill="none" stroke="#047857" stroke-width="0.8"/>
        <ellipse cx="282" cy="230" rx="8" ry="5" fill="none" stroke="#047857" stroke-width="0.8"/>
        <ellipse cx="302" cy="237" rx="8" ry="5" fill="none" stroke="#047857" stroke-width="0.8"/>
        <ellipse cx="322" cy="245" rx="8" ry="5" fill="none" stroke="#047857" stroke-width="0.8"/>
        <ellipse cx="342" cy="255" rx="8" ry="5" fill="none" stroke="#047857" stroke-width="0.8"/>
      </g>
    </g>
    
    <!-- Snake head (left side) -->
    <g filter="url(#snakeGlow)">
      <!-- Head shape -->
      <path d="M 72 355
               C 50 350 35 330 30 310
               C 25 290 35 270 55 265
               C 75 260 90 275 95 295
               C 85 310 80 325 85 340
               C 88 348 80 358 72 355
               Z"
            fill="url(#snakeBody)"/>
      
      <!-- Head scales -->
      <path d="M 72 355
               C 50 350 35 330 30 310
               C 25 290 35 270 55 265
               C 75 260 90 275 95 295
               C 85 310 80 325 85 340
               C 88 348 80 358 72 355
               Z"
            fill="url(#scalePattern)" opacity="0.4"/>
      
      <!-- Head highlight -->
      <path d="M 55 270 C 73 266 85 280 88 295"
            fill="none" stroke="#34d399" stroke-width="4" stroke-linecap="round" opacity="0.6"/>
      
      <!-- Eye socket -->
      <ellipse cx="55" cy="290" rx="12" ry="10" fill="#1a1a2e"/>
      
      <!-- Eye -->
      <ellipse cx="55" cy="290" rx="8" ry="7" fill="url(#snakeEyeGlow)"/>
      
      <!-- Pupil -->
      <ellipse cx="53" cy="290" rx="3" ry="6" fill="#1c1917"/>
      
      <!-- Eye highlight -->
      <circle cx="57" cy="286" r="2" fill="white" opacity="0.9"/>
      
      <!-- Nostril -->
      <ellipse cx="35" cy="300" rx="2" ry="1.5" fill="#065f46"/>
      
      <!-- Forked tongue -->
      <path d="M 28 310 
               C 20 315 15 310 8 305
               M 28 310
               C 20 320 15 325 8 330"
            fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>
      <path d="M 8 305 L 3 302 M 8 305 L 5 310"
            fill="none" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round"/>
      <path d="M 8 330 L 3 333 M 8 330 L 5 325"
            fill="none" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round"/>
    </g>
    
    <!-- Snake tail (right side) -->
    <g filter="url(#snakeGlow)">
      <!-- Tail shape -->
      <path d="M 420 355
               C 442 350 460 340 475 320
               C 485 305 490 285 485 270
               C 480 255 465 250 455 260
               C 445 270 440 290 435 310
               C 430 330 425 350 420 355
               Z"
            fill="url(#snakeBody)"/>
      
      <!-- Tail scales -->
      <path d="M 420 355
               C 442 350 460 340 475 320
               C 485 305 490 285 485 270
               C 480 255 465 250 455 260
               C 445 270 440 290 435 310
               C 430 330 425 350 420 355
               Z"
            fill="url(#scalePattern)" opacity="0.4"/>
      
      <!-- Tail highlight -->
      <path d="M 455 265 C 445 280 442 300 438 315"
            fill="none" stroke="#34d399" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
      
      <!-- Tail tip detail -->
      <path d="M 485 270 C 492 258 495 245 490 235"
            fill="none" stroke="#10b981" stroke-width="4" stroke-linecap="round"/>
      <circle cx="490" cy="235" r="3" fill="#10b981"/>
      
      <!-- Rattle segments (stylized) -->
      <ellipse cx="488" cy="248" rx="4" ry="3" fill="#fef9c3" opacity="0.6"/>
      <ellipse cx="490" cy="240" rx="3.5" ry="2.5" fill="#fef9c3" opacity="0.5"/>
    </g>
    
  </g>
  
  <!-- Decorative corner accents -->
  <g opacity="0.6">
    <!-- Top corners -->
    <path d="M 256 55 L 270 70 L 256 85 L 242 70 Z" fill="url(#hexBorder)" opacity="0.8"/>
    
    <!-- Upper corners -->
    <circle cx="120" cy="120" r="4" fill="#a855f7" opacity="0.6"/>
    <circle cx="392" cy="120" r="4" fill="#06b6d4" opacity="0.6"/>
    
    <!-- Side accents -->
    <path d="M 70 200 L 80 210 L 70 220 L 60 210 Z" fill="#7c3aed" opacity="0.5"/>
    <path d="M 442 200 L 452 210 L 442 220 L 432 210 Z" fill="#3b82f6" opacity="0.5"/>
    
    <!-- Lower accents -->
    <circle cx="120" cy="392" r="4" fill="#818cf8" opacity="0.6"/>
    <circle cx="392" cy="392" r="4" fill="#22d3ee" opacity="0.6"/>
  </g>
  

  
  <!-- Subtle tech circuit lines -->
  <g opacity="0.2" stroke="url(#hexBorder)" stroke-width="0.5" fill="none">
    <path d="M 80 160 L 100 160 L 110 170"/>
    <path d="M 432 160 L 412 160 L 402 170"/>
    <path d="M 80 352 L 100 352 L 110 342"/>
    <path d="M 432 352 L 412 352 L 402 342"/>
    <circle cx="110" cy="170" r="2"/>
    <circle cx="402" cy="170" r="2"/>
    <circle cx="110" cy="342" r="2"/>
    <circle cx="402" cy="342" r="2"/>
  </g>
  
</svg>