assets/book.svg

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <!-- Radial gradient background -->
    <defs>
      <radialGradient id="orbGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" stop-color="#7f56d9" stop-opacity="0.2"/>
        <stop offset="100%" stop-color="#4a90e2" stop-opacity="0"/>
      </radialGradient>
      
      <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur stdDeviation="8" result="blur"/>
        <feComposite in="SourceGraphic" in2="blur" operator="over"/>
      </filter>
      
      <linearGradient id="lensGradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#4a90e2" stop-opacity="0.8"/>
        <stop offset="100%" stop-color="#6f42c1" stop-opacity="0.9"/>
      </linearGradient>
      
      <clipPath id="cutout">
        <path d="M110,110 L150,130 L190,110 L190,210 L110,210 Z" />
      </clipPath>
    </defs>
    
    <!-- Background glow -->
    <circle cx="150" cy="150" r="140" fill="url(#orbGlow)"/>
    
    <!-- Dynamic data flow circles -->
    <g opacity="0.6">
      <circle cx="150" cy="150" r="120" fill="none" stroke="#4a90e2" stroke-width="1" stroke-dasharray="3,6">
        <animateTransform attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="40s" repeatCount="indefinite"/>
      </circle>
      <circle cx="150" cy="150" r="90" fill="none" stroke="#7f56d9" stroke-width="1" stroke-dasharray="5,5">
        <animateTransform attributeName="transform" type="rotate" from="360 150 150" to="0 150 150" dur="30s" repeatCount="indefinite"/>
      </circle>
      <circle cx="150" cy="150" r="60" fill="none" stroke="#00BFFF" stroke-width="1" stroke-dasharray="1,3">
        <animateTransform attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="20s" repeatCount="indefinite"/>
      </circle>
    </g>
    
    <!-- Main lens -->
    <g transform="translate(150, 150)">
      <g transform="rotate(-15)">
        <!-- Lens outer shape -->
        <ellipse cx="0" cy="0" rx="85" ry="70" fill="none" stroke="url(#lensGradient)" stroke-width="8" filter="url(#glow)"/>
        
        <!-- Lens reflection -->
        <path d="M-40,-30 Q-25,-45 -10,-30" fill="none" stroke="white" stroke-width="3" opacity="0.7"/>
        
        <!-- Lens inner details -->
        <ellipse cx="0" cy="0" rx="65" ry="50" fill="none" stroke="#00BFFF" stroke-width="2" stroke-dasharray="2,4" opacity="0.7"/>
      </g>
    </g>
    
    <!-- Floating papers -->
    <g>
      <!-- Paper 1 with data visualization -->
      <g transform="translate(90, 130) rotate(-15) skewX(5)">
        <rect x="0" y="0" width="70" height="90" fill="white" stroke="#4a90e2" stroke-width="1" rx="3"/>
        <line x1="10" y1="15" x2="60" y2="15" stroke="#6f42c1" stroke-width="2"/>
        <line x1="10" y1="25" x2="40" y2="25" stroke="#6f42c1" stroke-width="2"/>
        
        <!-- Bar chart on paper -->
        <rect x="15" y="40" width="10" height="30" fill="#00BFFF" opacity="0.7"/>
        <rect x="30" y="35" width="10" height="35" fill="#7f56d9" opacity="0.7"/>
        <rect x="45" y="45" width="10" height="25" fill="#4a90e2" opacity="0.7"/>
        
        <line x1="15" y1="70" x2="55" y2="70" stroke="#6f42c1" stroke-width="1"/>
      </g>
      
      <!-- Paper 2 with network -->
      <g transform="translate(170, 110) rotate(10) skewX(-5)">
        <rect x="0" y="0" width="70" height="90" fill="white" stroke="#7f56d9" stroke-width="1" rx="3"/>
        <line x1="10" y1="15" x2="60" y2="15" stroke="#4a90e2" stroke-width="2"/>
        <line x1="10" y1="25" x2="50" y2="25" stroke="#4a90e2" stroke-width="2"/>
        
        <!-- Network diagram -->
        <circle cx="20" cy="45" r="5" fill="#7f56d9" opacity="0.8"/>
        <circle cx="40" cy="40" r="5" fill="#4a90e2" opacity="0.8"/>
        <circle cx="50" cy="55" r="5" fill="#00BFFF" opacity="0.8"/>
        <circle cx="25" cy="60" r="5" fill="#6f42c1" opacity="0.8"/>
        
        <line x1="20" y1="45" x2="40" y2="40" stroke="#6f42c1" stroke-width="1"/>
        <line x1="40" y1="40" x2="50" y2="55" stroke="#6f42c1" stroke-width="1"/>
        <line x1="50" y1="55" x2="25" y2="60" stroke="#6f42c1" stroke-width="1"/>
        <line x1="25" y1="60" x2="20" y2="45" stroke="#6f42c1" stroke-width="1"/>
      </g>
      
      <!-- Paper 3 with citation tree -->
      <g transform="translate(130, 170) rotate(-5)">
        <rect x="0" y="0" width="70" height="90" fill="white" stroke="#00BFFF" stroke-width="1" rx="3"/>
        <line x1="10" y1="15" x2="60" y2="15" stroke="#7f56d9" stroke-width="2"/>
        <line x1="10" y1="25" x2="45" y2="25" stroke="#7f56d9" stroke-width="2"/>
        
        <!-- Citation tree -->
        <line x1="35" y1="40" x2="35" y2="60" stroke="#4a90e2" stroke-width="2"/>
        <line x1="35" y1="50" x2="20" y2="60" stroke="#4a90e2" stroke-width="2"/>
        <line x1="35" y1="50" x2="50" y2="60" stroke="#4a90e2" stroke-width="2"/>
        <circle cx="35" cy="40" r="5" fill="#7f56d9"/>
        <circle cx="20" cy="60" r="4" fill="#00BFFF"/>
        <circle cx="35" cy="60" r="4" fill="#7f56d9"/>
        <circle cx="50" cy="60" r="4" fill="#00BFFF"/>
      </g>
    </g>
    
    <!-- Data particles -->
    <g opacity="0.8">
      <circle cx="120" cy="100" r="3" fill="#4a90e2">
        <animate attributeName="cy" values="100;120;100" dur="3s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.8;0.3;0.8" dur="3s" repeatCount="indefinite"/>
      </circle>
      <circle cx="200" cy="150" r="2" fill="#7f56d9">
        <animate attributeName="cx" values="200;180;200" dur="4s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.8;0.4;0.8" dur="4s" repeatCount="indefinite"/>
      </circle>
      <circle cx="150" cy="220" r="3" fill="#00BFFF">
        <animate attributeName="cy" values="220;200;220" dur="5s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.8;0.3;0.8" dur="5s" repeatCount="indefinite"/>
      </circle>
      <circle cx="100" cy="170" r="2" fill="#6f42c1">
        <animate attributeName="cx" values="100;120;100" dur="3.5s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.8;0.4;0.8" dur="3.5s" repeatCount="indefinite"/>
      </circle>
    </g>
    
    <!-- Connection lines representing data mapping -->
    <g stroke="#7f56d9" stroke-width="1" opacity="0.6">
      <line x1="120" y1="100" x2="200" y2="150">
        <animate attributeName="opacity" values="0.6;0.2;0.6" dur="6s" repeatCount="indefinite"/>
      </line>
      <line x1="200" y1="150" x2="150" y2="220">
        <animate attributeName="opacity" values="0.6;0.3;0.6" dur="5s" repeatCount="indefinite"/>
      </line>
      <line x1="150" y1="220" x2="100" y2="170">
        <animate attributeName="opacity" values="0.6;0.2;0.6" dur="7s" repeatCount="indefinite"/>
      </line>
      <line x1="100" y1="170" x2="120" y2="100">
        <animate attributeName="opacity" values="0.6;0.3;0.6" dur="4s" repeatCount="indefinite"/>
      </line>
    </g>
    
    <!-- P letterform integrated -->
    <g transform="translate(105, 115) scale(0.6) rotate(-10)">
      <path d="M0,0 L0,120 M0,15 Q40,0 40,40 Q40,80 0,65" fill="none" stroke="#4a90e2" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
    </g>
    
    <!-- L letterform integrated -->
    <g transform="translate(175, 130) scale(0.5) rotate(10)">
      <path d="M0,0 L0,120 L50,120" fill="none" stroke="#7f56d9" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
    </g>
  </svg>