Update README.md

README.md

@@ -21,49 +21,103 @@ tags:
     width: 600px;
     margin: 20px auto;
     display: block;
+    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(137,27,171,0.2) 100%);
+    padding: 20px;
 }
 
-.logo-text {
-    font-family: 'Arial', sans-serif;
-    font-weight: bold;
+.logo-text-main {
+    font-family: 'Arial Black', sans-serif;
     fill: none;
-    stroke: #00ffff;
     stroke-width: 2;
     stroke-linejoin: round;
-    stroke-dasharray: 1000;
-    stroke-dashoffset: 1000;
-    animation: draw 3s ease forwards, glow 2s ease-in-out infinite alternate;
+    animation: glow 2s ease-in-out infinite alternate;
 }
 
-@keyframes draw {
-    to {
-        stroke-dashoffset: 0;
-    }
+.logo-text-outline {
+    stroke: #ff00ff;
+    stroke-width: 8;
+    stroke-linejoin: round;
+    fill: none;
+}
+
+.logo-text-fill {
+    fill: url(#retroGradient);
+    stroke: none;
+}
+
+.logo-text-shadow {
+    fill: none;
+    stroke: #00ffff;
+    stroke-width: 2;
+    filter: blur(3px);
+}
+
+.subtitle {
+    font-family: 'Arial', sans-serif;
+    fill: #00ffff;
+    font-size: 20px;
+    filter: drop-shadow(0 0 2px #00ffff);
 }
 
 @keyframes glow {
     from {
-        filter: drop-shadow(0 0 2px #00ffff) drop-shadow(0 0 4px #00ffff);
+        filter: drop-shadow(0 0 2px #ff00ff) 
+                drop-shadow(0 0 4px #ff00ff) 
+                drop-shadow(0 0 6px #00ffff);
     }
     to {
-        filter: drop-shadow(0 0 4px #00ffff) drop-shadow(0 0 8px #00ffff);
+        filter: drop-shadow(0 0 4px #ff00ff) 
+                drop-shadow(0 0 8px #ff00ff) 
+                drop-shadow(0 0 12px #00ffff);
     }
 }
 </style>
 
-<svg class="logo" viewBox="0 0 800 100" xmlns="http://www.w3.org/2000/svg">
+<svg class="logo" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
     <defs>
-        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" style="stop-color:#00ffff;stop-opacity:1" />
-            <stop offset="100%" style="stop-color:#0099ff;stop-opacity:1" />
+        <linearGradient id="retroGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" style="stop-color:#ff00ff;stop-opacity:1" />
+            <stop offset="50%" style="stop-color:#ff71ce;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#b967ff;stop-opacity:1" />
         </linearGradient>
+        <filter id="chrome">
+            <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
+            <feOffset in="blur" dx="2" dy="2" result="offsetBlur" />
+            <feMerge>
+                <feMergeNode in="offsetBlur" />
+                <feMergeNode in="SourceGraphic" />
+            </feMerge>
+        </filter>
     </defs>
-    <text x="50%" y="50%" text-anchor="middle" class="logo-text" dominant-baseline="middle" font-size="60px">
-        Proteus<tspan fill="url(#gradient)" stroke="none">Σ</tspan>igma
-    </text>
-    <text x="50%" y="75%" text-anchor="middle" class="logo-text" dominant-baseline="middle" font-size="20px" stroke-width="1">
-        STABLE DIFFUSION XL
-    </text>
+    
+    <!-- Main text with effects -->
+    <g transform="translate(400,100)" text-anchor="middle">
+        <!-- Shadow layer -->
+        <text class="logo-text-main logo-text-shadow" 
+              x="-100" y="0" font-size="80px">Proteus</text>
+        
+        <!-- Outline layer -->
+        <text class="logo-text-main logo-text-outline" 
+              x="-100" y="0" font-size="80px">Proteus</text>
+        
+        <!-- Gradient fill layer -->
+        <text class="logo-text-main logo-text-fill" 
+              x="-100" y="0" font-size="80px">Proteus</text>
+              
+        <!-- Sigma symbol -->
+        <text x="120" y="0" 
+              font-size="80px" 
+              fill="#00ffff" 
+              filter="url(#chrome)">Σ</text>
+        
+        <!-- Subtitle -->
+        <text class="subtitle" y="40">STABLE DIFFUSION XL</text>
+    </g>
+    
+    <!-- Grid effect -->
+    <path d="M0 180 L800 180" stroke="#ff00ff" stroke-width="1" opacity="0.5"/>
+    <path d="M0 185 L800 185" stroke="#00ffff" stroke-width="1" opacity="0.3"/>
+    <path d="M0 190 L800 190" stroke="#ff00ff" stroke-width="1" opacity="0.2"/>
 </svg>
 
 ## Example Outputs