logo again (#450)

lazarusA · web-flow · commit 15923d8a6582 · 2025-12-09T08:38:54.000+01:00
* simpler logo

* align

* rm dims

* do just text

* one

* b aspect
diff --git a/README.md b/README.md
@@ -1,6 +1,10 @@
 <div align="center">
 
-[![Launch browzarr](./public/launch-browzarr.svg)](https://browzarr.io)
+<div style="justify-content: center;">
+  <a href="https://browzarr.io">
+    <img src="./public/logo.png" alt="Launch browzarr" height="100">
+  </a>
+</div>
 
 **Interactive Browser-Based Visualization Framework for Exploring Zarr Data Stores**
 
diff --git a/public/browzarr-light.svg b/public/browzarr-light.svg
@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 35" width="600" height="150">
+  <defs>
+    <!-- Gray gradient for neutral dark/light visibility -->
+    <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#555"/>
+      <stop offset="100%" stop-color="#888"/>
+    </linearGradient>
+    
+    <!-- Subtle shadow -->
+    <filter id="textShadow">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
+      <feOffset dx="0" dy="2" result="offsetblur"/>
+      <feComponentTransfer>
+        <feFuncA type="linear" slope="0.25"/>
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    
+    <!-- Shine effect -->
+    <linearGradient id="shine" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.2"/>
+      <stop offset="50%" stop-color="#ffffff" stop-opacity="0.1"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Main text in neutral gray -->
+  <text x="75" y="26" 
+        font-family="'Segoe UI', Arial, Helvetica, sans-serif" 
+        font-size="24" 
+        font-weight="700" 
+        fill="url(#textGradient)"
+        filter="url(#textShadow)"
+        letter-spacing="0.5"
+        text-anchor="middle">browzarr.io</text>
+  
+  <!-- Shine overlay -->
+  <text x="75" y="26" 
+        font-family="'Segoe UI', Arial, Helvetica, sans-serif" 
+        font-size="24" 
+        font-weight="700" 
+        fill="url(#shine)"
+        letter-spacing="0.5"
+        opacity="0.3"
+        text-anchor="middle">browzarr.io</text>
+</svg>
diff --git a/public/browzarr.svg b/public/browzarr.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 35" width="500" height="150">
+  <defs>
+    <!-- Enhanced gradient with smoother transitions -->
+    <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#1E88E5"/>
+      <stop offset="22%" stop-color="#5E35B1"/>
+      <stop offset="52%" stop-color="#E91E63"/>
+      <stop offset="68%" stop-color="#FF6F00"/>
+      <stop offset="78%" stop-color="#8E24AA"/>
+      <stop offset="100%" stop-color="#1E88E5"/>
+    </linearGradient>
+    
+    <!-- Subtle shadow -->
+    <filter id="textShadow">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
+      <feOffset dx="0" dy="2" result="offsetblur"/>
+      <feComponentTransfer>
+        <feFuncA type="linear" slope="0.3"/>
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    
+    <!-- Shine effect -->
+    <linearGradient id="shine" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.3"/>
+      <stop offset="50%" stop-color="#ffffff" stop-opacity="0.1"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Main text with gradient and effects -->
+  <text x="75" y="26" 
+        font-family="'Segoe UI', Arial, Helvetica, sans-serif" 
+        font-size="24" 
+        font-weight="700" 
+        fill="url(#textGradient)"
+        filter="url(#textShadow)"
+        letter-spacing="0.5"
+        text-anchor="middle">browzarr.io</text>
+  
+  <!-- Shine overlay for depth -->
+  <text x="75" y="26" 
+        font-family="'Segoe UI', Arial, Helvetica, sans-serif" 
+        font-size="24" 
+        font-weight="700" 
+        fill="url(#shine)"
+        letter-spacing="0.5"
+        opacity="0.4"
+        text-anchor="middle">browzarr.io</text>
+</svg>
diff --git a/public/logo-color.png b/public/logo-color.png
diff --git a/public/logo-light.svg b/public/logo-light.svg
@@ -0,0 +1,58 @@
+<svg width="150" height="150" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+  <!-- Main window -->
+  <rect x="20" y="20" width="260" height="260" rx="20" ry="20" fill="white" stroke="#888" stroke-width="8"/>
+
+  <!-- Header separator lines -->
+  <rect x="24" y="70" width="252" height="6" rx="3" fill="#888"/>
+  <rect x="24" y="76" width="252" height="2" rx="1" fill="#888"/>
+
+  <!-- Window buttons (keep original colors) -->
+  <circle cx="50" cy="45" r="10" fill="#E85D4E"/>
+  <circle cx="80" cy="45" r="10" fill="#F5C542"/>
+  <circle cx="110" cy="45" r="10" fill="#5FBB5B"/>
+
+  <!-- Window control icons -->
+  <line x1="185" y1="45" x2="200" y2="45" stroke="#555" stroke-width="3" stroke-linecap="round"/>
+  <rect x="215" y="35" width="20" height="20" rx="2" fill="none" stroke="#555" stroke-width="3"/>
+  <line x1="250" y1="35" x2="265" y2="50" stroke="#555" stroke-width="3" stroke-linecap="round"/>
+  <line x1="265" y1="35" x2="250" y2="50" stroke="#555" stroke-width="3" stroke-linecap="round"/>
+
+  <!-- Cube Icon -->
+  <g transform="translate(45, 110) scale(1.3)">
+    <path d="M20 0 L40 10 L20 20 L0 10 Z" fill="none" stroke="#000" stroke-width="2.5"/>
+    <path d="M0 10 L0 30 L20 40 L20 20 Z" fill="none" stroke="#000" stroke-width="2.5"/>
+    <path d="M20 20 L20 40 L40 30 L40 10 Z" fill="none" stroke="#000" stroke-width="2.5"/>
+  </g>
+
+  <!-- Grid of Dots Icon -->
+  <g transform="translate(120, 115) scale(1.3)" fill="#000">
+    <circle cx="0" cy="0" r="3"/>
+    <circle cx="15" cy="0" r="3"/>
+    <circle cx="30" cy="0" r="3"/>
+    <circle cx="0" cy="15" r="3"/>
+    <circle cx="15" cy="15" r="3"/>
+    <circle cx="30" cy="15" r="3"/>
+    <circle cx="0" cy="30" r="3"/>
+    <circle cx="15" cy="30" r="3"/>
+    <circle cx="30" cy="30" r="3"/>
+  </g>
+
+  <!-- Globe Icon -->
+  <g transform="translate(60, 205) scale(1.3)" stroke="#000" stroke-width="2.5" fill="none">
+    <circle cx="20" cy="20" r="18"/>
+    <ellipse cx="20" cy="20" rx="8" ry="18"/>
+    <ellipse cx="20" cy="20" rx="18" ry="8"/>
+  </g>
+
+  <!-- Rectangle Icon -->
+  <g transform="translate(130, 210) scale(1.3)">
+    <rect x="0" y="5" width="40" height="30" rx="3" fill="none" stroke="#000" stroke-width="2.5"/>
+  </g>
+
+  <!-- Chart/Graph Icon -->
+  <g transform="translate(200, 110) scale(1.3)" stroke="#000" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="0,35 8,25 16,30 24,15 32,20 40,5"/>
+    <line x1="0" y1="0" x2="0" y2="40"/>
+    <line x1="0" y1="40" x2="40" y2="40"/>
+  </g>
+</svg>
diff --git a/public/logo.png b/public/logo.png
diff --git a/public/logo.svg b/public/logo.svg
@@ -0,0 +1,68 @@
+<svg width="150" height="150" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="borderGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#1E88E5;stop-opacity:1"/>
+      <stop offset="25%" style="stop-color:#5E35B1;stop-opacity:1"/>
+      <stop offset="50%" style="stop-color:#8E24AA;stop-opacity:1"/>
+      <stop offset="75%" style="stop-color:#F4511E;stop-opacity:1"/>
+      <stop offset="100%" style="stop-color:#FF9800;stop-opacity:1"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Main window -->
+  <rect x="20" y="20" width="260" height="260" rx="20" ry="20" fill="white" stroke="url(#borderGradient)" stroke-width="8"/>
+
+  <!-- Header separator lines with gradient -->
+  <rect x="24" y="70" width="252" height="6" rx="3" fill="url(#borderGradient)"/>
+  <rect x="24" y="76" width="252" height="2" rx="1" fill="url(#borderGradient)"/>
+
+  <!-- Window buttons -->
+  <circle cx="50" cy="45" r="10" fill="#E85D4E"/>
+  <circle cx="80" cy="45" r="10" fill="#F5C542"/>
+  <circle cx="110" cy="45" r="10" fill="#5FBB5B"/>
+
+  <!-- Window control icons -->
+  <line x1="185" y1="45" x2="200" y2="45" stroke="#262626" stroke-width="3" stroke-linecap="round"/>
+  <rect x="215" y="35" width="20" height="20" rx="2" fill="none" stroke="#262626" stroke-width="3"/>
+  <line x1="250" y1="35" x2="265" y2="50" stroke="#262626" stroke-width="3" stroke-linecap="round"/>
+  <line x1="265" y1="35" x2="250" y2="50" stroke="#262626" stroke-width="3" stroke-linecap="round"/>
+
+  <!-- Cube Icon -->
+  <g transform="translate(45, 110) scale(1.3)">
+    <path d="M20 0 L40 10 L20 20 L0 10 Z" fill="none" stroke="#1E88E5" stroke-width="2.5"/>
+    <path d="M0 10 L0 30 L20 40 L20 20 Z" fill="none" stroke="#1E88E5" stroke-width="2.5"/>
+    <path d="M20 20 L20 40 L40 30 L40 10 Z" fill="none" stroke="#1E88E5" stroke-width="2.5"/>
+  </g>
+
+  <!-- Grid of Dots Icon -->
+  <g transform="translate(120, 115) scale(1.3)" fill="#5E35B1">
+    <circle cx="0" cy="0" r="3"/>
+    <circle cx="15" cy="0" r="3"/>
+    <circle cx="30" cy="0" r="3"/>
+    <circle cx="0" cy="15" r="3"/>
+    <circle cx="15" cy="15" r="3"/>
+    <circle cx="30" cy="15" r="3"/>
+    <circle cx="0" cy="30" r="3"/>
+    <circle cx="15" cy="30" r="3"/>
+    <circle cx="30" cy="30" r="3"/>
+  </g>
+
+  <!-- Globe Icon -->
+  <g transform="translate(60, 205) scale(1.3)" stroke="#8E24AA" stroke-width="2.5" fill="none">
+    <circle cx="20" cy="20" r="18"/>
+    <ellipse cx="20" cy="20" rx="8" ry="18"/>
+    <ellipse cx="20" cy="20" rx="18" ry="8"/>
+  </g>
+
+  <!-- Rectangle Icon -->
+  <g transform="translate(130, 210) scale(1.3)">
+    <rect x="0" y="5" width="40" height="30" rx="3" fill="none" stroke="#F4511E" stroke-width="2.5"/>
+  </g>
+
+  <!-- Chart/Graph Icon -->
+  <g transform="translate(200, 110) scale(1.3)" stroke="#FF9800" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="0,35 8,25 16,30 24,15 32,20 40,5"/>
+    <line x1="0" y1="0" x2="0" y2="40"/>
+    <line x1="0" y1="40" x2="40" y2="40"/>
+  </g>
+</svg>
