VL-C37-2025.svg

VL-C37-2025.svg

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <!-- Background gradient -->
  <defs>
    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#1a1a2e" />
      <stop offset="100%" stop-color="#16213e" />
    </linearGradient>
    <radialGradient id="glow1" cx="30%" cy="30%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#4361ee" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#4361ee" stop-opacity="0" />
    </radialGradient>
    <radialGradient id="glow2" cx="70%" cy="60%" r="50%" fx="70%" fy="60%">
      <stop offset="0%" stop-color="#f72585" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#f72585" stop-opacity="0" />
    </radialGradient>
  </defs>
  
  <!-- Base background -->
  <rect width="800" height="600" fill="url(#bg-gradient)" />
  
  <!-- Ambient glows -->
  <circle cx="240" cy="180" r="300" fill="url(#glow1)" opacity="0.5" />
  <circle cx="560" cy="360" r="300" fill="url(#glow2)" opacity="0.5" />
  
  <!-- Connection lines - digital neural network -->
  <g stroke-width="1.5" stroke-opacity="0.6">
    <!-- Left side connections (more orderly, representing AI) -->
    <path d="M150,150 C250,180 200,280 300,290" stroke="#4cc9f0" />
    <path d="M150,180 C220,220 260,240 300,290" stroke="#4cc9f0" />
    <path d="M150,210 C200,240 250,260 300,290" stroke="#4cc9f0" />
    <path d="M150,240 C180,250 230,270 300,290" stroke="#4cc9f0" />
    <path d="M150,270 C170,270 220,280 300,290" stroke="#4cc9f0" />
    <path d="M150,300 C200,310 250,300 300,290" stroke="#4cc9f0" />
    <path d="M150,330 C230,320 270,300 300,290" stroke="#4cc9f0" />
    
    <!-- Right side connections (more organic, representing human) -->
    <path d="M500,290 C550,250 600,320 650,300" stroke="#f72585" />
    <path d="M500,290 C570,310 590,260 650,270" stroke="#f72585" />
    <path d="M500,290 C530,340 610,350 650,330" stroke="#f72585" />
    <path d="M500,290 C540,270 580,220 650,240" stroke="#f72585" />
    <path d="M500,290 C520,230 590,200 650,210" stroke="#f72585" />
    <path d="M500,290 C560,360 620,380 650,360" stroke="#f72585" />
    
    <!-- Connecting the two sides -->
    <path d="M300,290 C350,240 450,340 500,290" stroke="#7209b7" stroke-width="2" />
    <path d="M300,290 C380,320 420,260 500,290" stroke="#3a0ca3" stroke-width="2" />
    <path d="M300,290 C350,310 450,270 500,290" stroke="#560bad" stroke-width="2" />
    <path d="M300,290 C370,270 430,320 500,290" stroke="#480ca8" stroke-width="2" />
  </g>
  
  <!-- Nodes -->
  <g>
    <!-- Left side nodes (AI side) -->
    <circle cx="150" cy="150" r="8" fill="#4cc9f0" />
    <circle cx="150" cy="180" r="8" fill="#4cc9f0" />
    <circle cx="150" cy="210" r="8" fill="#4cc9f0" />
    <circle cx="150" cy="240" r="8" fill="#4cc9f0" />
    <circle cx="150" cy="270" r="8" fill="#4cc9f0" />
    <circle cx="150" cy="300" r="8" fill="#4cc9f0" />
    <circle cx="150" cy="330" r="8" fill="#4cc9f0" />
    
    <!-- Central connecting nodes -->
    <circle cx="300" cy="290" r="12" fill="#7209b7">
      <animate attributeName="r" values="12;14;12" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="500" cy="290" r="12" fill="#7209b7">
      <animate attributeName="r" values="12;14;12" dur="3s" repeatCount="indefinite" />
    </circle>
    
    <!-- Right side nodes (human side) -->
    <circle cx="650" cy="210" r="8" fill="#f72585" />
    <circle cx="650" cy="240" r="8" fill="#f72585" />
    <circle cx="650" cy="270" r="8" fill="#f72585" />
    <circle cx="650" cy="300" r="8" fill="#f72585" />
    <circle cx="650" cy="330" r="8" fill="#f72585" />
    <circle cx="650" cy="360" r="8" fill="#f72585" />
  </g>
  
  <!-- Data particles -->
  <g>
    <circle cx="200" cy="200" r="2" fill="white">
      <animate attributeName="cx" values="150;300" dur="4s" repeatCount="indefinite" />
      <animate attributeName="cy" values="150;290" dur="4s" repeatCount="indefinite" />
    </circle>
    <circle cx="210" cy="260" r="2" fill="white">
      <animate attributeName="cx" values="150;300" dur="3.5s" repeatCount="indefinite" />
      <animate attributeName="cy" values="240;290" dur="3.5s" repeatCount="indefinite" />
    </circle>
    <circle cx="170" cy="290" r="2" fill="white">
      <animate attributeName="cx" values="150;300" dur="5s" repeatCount="indefinite" />
      <animate attributeName="cy" values="300;290" dur="5s" repeatCount="indefinite" />
    </circle>
    
    <circle cx="550" cy="260" r="2" fill="white">
      <animate attributeName="cx" values="500;650" dur="4.2s" repeatCount="indefinite" />
      <animate attributeName="cy" values="290;240" dur="4.2s" repeatCount="indefinite" />
    </circle>
    <circle cx="580" cy="310" r="2" fill="white">
      <animate attributeName="cx" values="500;650" dur="3.7s" repeatCount="indefinite" />
      <animate attributeName="cy" values="290;330" dur="3.7s" repeatCount="indefinite" />
    </circle>
    
    <!-- Cross-connection particles -->
    <circle cx="400" cy="290" r="3" fill="#b5179e">
      <animate attributeName="cx" values="300;500" dur="2s" repeatCount="indefinite" />
    </circle>
    <circle cx="350" cy="290" r="3" fill="#7209b7">
      <animate attributeName="cx" values="500;300" dur="2.3s" repeatCount="indefinite" />
    </circle>
    <circle cx="420" cy="290" r="3" fill="#560bad">
      <animate attributeName="cx" values="300;500" dur="1.7s" repeatCount="indefinite" />
    </circle>
  </g>
  
  <!-- Abstract floating elements -->
  <g opacity="0.7">
    <path d="M100,100 L130,80 L160,110 L140,140 Z" fill="#4361ee" opacity="0.3">
      <animate attributeName="transform" attributeType="XML" type="rotate" from="0 130 110" to="360 130 110" dur="30s" repeatCount="indefinite" />
    </path>
    <path d="M700,400 L730,380 L760,410 L740,440 Z" fill="#f72585" opacity="0.3">
      <animate attributeName="transform" attributeType="XML" type="rotate" from="0 730 410" to="360 730 410" dur="25s" repeatCount="indefinite" />
    </path>
    <circle cx="200" cy="450" r="30" fill="#4cc9f0" opacity="0.2">
      <animate attributeName="r" values="30;40;30" dur="10s" repeatCount="indefinite" />
    </circle>
    <circle cx="600" cy="150" r="40" fill="#f72585" opacity="0.2">
      <animate attributeName="r" values="40;50;40" dur="12s" repeatCount="indefinite" />
    </circle>
  </g>
  
  <!-- Title -->
  <text x="400" y="550" font-family="Arial, sans-serif" font-size="24" fill="white" text-anchor="middle">Convergence: Digital Consciousness</text>
</svg>