feat: enhance logo with gradient background and stylized code representation

magic5644 · magic5644 · commit 4f6a62af6cbd · 2024-11-28T11:31:46.000+01:00
diff --git a/assets/codelinecounter-logo.svg b/assets/codelinecounter-logo.svg
@@ -1,16 +1,76 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
-  <!-- Background -->
-  <rect width="200" height="200" fill="#2C3E50" rx="20" ry="20"/>
-  
-  <!-- Code Brackets -->
-  <path d="M60 70 L30 100 L60 130" fill="none" stroke="#ECF0F1" stroke-width="12" stroke-linecap="round"/>
-  <path d="M140 70 L170 100 L140 130" fill="none" stroke="#ECF0F1" stroke-width="12" stroke-linecap="round"/>
-  
-  <!-- Vertical Lines representing Code/Metrics -->
-  <line x1="80" y1="50" x2="80" y2="150" stroke="#3498DB" stroke-width="8" stroke-linecap="round"/>
-  <line x1="100" y1="70" x2="100" y2="130" stroke="#3498DB" stroke-width="8" stroke-linecap="round"/>
-  <line x1="120" y1="60" x2="120" y2="140" stroke="#3498DB" stroke-width="8" stroke-linecap="round"/>
-  
-  <!-- .NET Symbol -->
-  <text x="100" y="180" font-family="Arial, sans-serif" font-size="30" font-weight="bold" text-anchor="middle" fill="#ECF0F1">.NET</text>
-</svg>
+  <!-- Gradient Background -->
+  <defs>
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#2C3E50;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#34495E;stop-opacity:1" />
+    </linearGradient>
+    <!-- Metrics Gradient -->
+    <linearGradient id="metricsGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#3498DB;stop-opacity:0.5" />
+      <stop offset="100%" style="stop-color:#3498DB;stop-opacity:0.1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Background with Gradient -->
+  <rect width="200" height="200" fill="url(#bgGradient)" rx="25" ry="25"/>
+
+  <!-- .NET Text at the Top -->
+  <text x="100" y="30" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="#ECF0F1">
+    .NET
+  </text>
+
+  <!-- Stylized Code Page -->
+  <g transform="translate(30, 60)">
+    <!-- Page Background -->
+    <rect width="140" height="100" fill="#1C2833" rx="10" ry="10"/>
+
+    <!-- Clipping Mask to Ensure Text Stays Inside -->
+    <clipPath id="code-area">
+      <rect width="140" height="100" rx="10" ry="10"/>
+    </clipPath>
+
+    <!-- Code Lines with Line Numbers -->
+    <g clip-path="url(#code-area)" fill="#ECF0F1" font-family="monospace" font-size="5">
+      <!-- Line Numbers -->
+      <g fill="#7F8C8D">
+        <text x="5" y="10">1</text>
+        <text x="5" y="20">2</text>
+        <text x="5" y="30">3</text>
+        <text x="5" y="40">4</text>
+        <text x="5" y="50">5</text>
+        <text x="5" y="60">6</text>
+      </g>
+
+      <!-- Code Syntax Highlighting -->
+      <text x="20" y="10" fill="#3498DB">using</text>
+      <text x="40" y="10" fill="#ECF0F1">System.Linq;</text>
+      <text x="20" y="20" fill="#E74C3C">public</text>
+      <text x="40" y="20" fill="#3498DB">class</text>
+      <text x="55" y="20" fill="#ECF0F1">CodeLineCounter</text>
+      <text x="110" y="20" fill="#F39C12">{</text>
+      <text x="35" y="30" fill="#3498DB">public</text>
+      <text x="55" y="30" fill="#3498DB">int</text>
+      <text x="65" y="30" fill="#ECF0F1">AnalyzeLines</text>
+      <text x="105" y="30" fill="#F39C12">(</text>
+      <text x="110" y="30" fill="#3498DB">string</text>
+      <text x="135" y="30" fill="#ECF0F1">path)</text>
+      <text x="150" y="30" fill="#F39C12">{</text>
+      <text x="50" y="40" fill="#E74C3C">return</text>
+      <text x="75" y="40" fill="#ECF0F1">File.ReadLines(path).Count();</text>
+      <text x="35" y="50" fill="#F39C12">}</text>
+      <text x="20" y="60" fill="#F39C12">}</text>
+    </g>
+  </g>
+
+  <!-- Metrics Visualization -->
+  <g transform="translate(30, 170)">
+    <rect x="0" y="0" width="140" height="10" fill="url(#metricsGradient)"/>
+    <!-- Metrics Icons/Text -->
+    <g fill="#ECF0F1" font-family="Arial, sans-serif" font-size="8">
+      <text x="0" y="20">Lines: 100</text>
+      <text x="50" y="20">Dupl: 5%</text>
+      <text x="100" y="20">Compl: 3</text>
+    </g>
+  </g>
+</svg>
