2026-02-27 Hero SVG redesign: candlestick chart, grid, glow effects

eddmpython · eddmpython · commit a54183729a8f · 2026-02-27T23:25:58.000+09:00
diff --git a/.github/assets/hero.svg b/.github/assets/hero.svg
@@ -1,22 +1,113 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 200">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 400">
   <defs>
     <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0a0a0a"/>
-      <stop offset="100%" style="stop-color:#0f1a12"/>
+      <stop offset="0%" style="stop-color:#0a0f1a"/>
+      <stop offset="50%" style="stop-color:#0f172a"/>
+      <stop offset="100%" style="stop-color:#0a1628"/>
     </linearGradient>
-    <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+    <linearGradient id="titleGrad" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" style="stop-color:#00d4aa"/>
-      <stop offset="50%" style="stop-color:#00b4d8"/>
-      <stop offset="100%" style="stop-color:#0096c7"/>
+      <stop offset="100%" style="stop-color:#00b4d8"/>
     </linearGradient>
-    <linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+    <linearGradient id="chartFill" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#00d4aa;stop-opacity:0.25"/>
+      <stop offset="100%" style="stop-color:#00d4aa;stop-opacity:0.02"/>
+    </linearGradient>
+    <linearGradient id="gridGlow" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#1e293b;stop-opacity:0.6"/>
+      <stop offset="100%" style="stop-color:#1e293b;stop-opacity:0"/>
+    </linearGradient>
+    <linearGradient id="accentLine" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" style="stop-color:#00d4aa;stop-opacity:0"/>
-      <stop offset="50%" style="stop-color:#00d4aa;stop-opacity:1"/>
-      <stop offset="100%" style="stop-color:#00d4aa;stop-opacity:0"/>
+      <stop offset="15%" style="stop-color:#00d4aa;stop-opacity:1"/>
+      <stop offset="85%" style="stop-color:#00b4d8;stop-opacity:1"/>
+      <stop offset="100%" style="stop-color:#00b4d8;stop-opacity:0"/>
     </linearGradient>
+    <radialGradient id="glow1" cx="30%" cy="60%" r="40%">
+      <stop offset="0%" style="stop-color:#00d4aa;stop-opacity:0.06"/>
+      <stop offset="100%" style="stop-color:#00d4aa;stop-opacity:0"/>
+    </radialGradient>
+    <radialGradient id="glow2" cx="70%" cy="50%" r="35%">
+      <stop offset="0%" style="stop-color:#00b4d8;stop-opacity:0.05"/>
+      <stop offset="100%" style="stop-color:#00b4d8;stop-opacity:0"/>
+    </radialGradient>
+    <filter id="textGlow">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="dotGlow">
+      <feGaussianBlur stdDeviation="4"/>
+    </filter>
   </defs>
-  <rect width="800" height="200" fill="url(#bg)"/>
-  <line x1="150" y1="145" x2="650" y2="145" stroke="url(#lineGrad)" stroke-width="1"/>
-  <text x="400" y="105" text-anchor="middle" fill="url(#textGrad)" font-family="'SF Pro Display', 'Segoe UI', sans-serif" font-size="72" font-weight="700" letter-spacing="8">TRADIX</text>
-  <text x="400" y="172" text-anchor="middle" fill="#6b7280" font-family="'SF Pro Display', 'Segoe UI', sans-serif" font-size="16" font-weight="400" letter-spacing="4">BACKTEST THE MARKET</text>
+
+  <rect width="900" height="400" fill="url(#bg)"/>
+  <rect width="900" height="400" fill="url(#glow1)"/>
+  <rect width="900" height="400" fill="url(#glow2)"/>
+
+  <line x1="100" y1="180" x2="800" y2="180" stroke="#1e293b" stroke-width="0.5" opacity="0.3"/>
+  <line x1="100" y1="220" x2="800" y2="220" stroke="#1e293b" stroke-width="0.5" opacity="0.3"/>
+  <line x1="100" y1="260" x2="800" y2="260" stroke="#1e293b" stroke-width="0.5" opacity="0.3"/>
+  <line x1="100" y1="300" x2="800" y2="300" stroke="#1e293b" stroke-width="0.5" opacity="0.3"/>
+  <line x1="100" y1="340" x2="800" y2="340" stroke="#1e293b" stroke-width="0.5" opacity="0.3"/>
+
+  <line x1="200" y1="180" x2="200" y2="360" stroke="#1e293b" stroke-width="0.5" opacity="0.2"/>
+  <line x1="350" y1="180" x2="350" y2="360" stroke="#1e293b" stroke-width="0.5" opacity="0.2"/>
+  <line x1="500" y1="180" x2="500" y2="360" stroke="#1e293b" stroke-width="0.5" opacity="0.2"/>
+  <line x1="650" y1="180" x2="650" y2="360" stroke="#1e293b" stroke-width="0.5" opacity="0.2"/>
+
+  <line x1="140" y1="335" x2="140" y2="310" stroke="#334155" stroke-width="1.2"/>
+  <rect x="136" y="315" width="8" height="12" rx="1" fill="#00d4aa" opacity="0.5"/>
+  <line x1="185" y1="340" x2="185" y2="318" stroke="#334155" stroke-width="1.2"/>
+  <rect x="181" y="322" width="8" height="10" rx="1" fill="#ef4444" opacity="0.4"/>
+  <line x1="230" y1="330" x2="230" y2="305" stroke="#334155" stroke-width="1.2"/>
+  <rect x="226" y="308" width="8" height="14" rx="1" fill="#00d4aa" opacity="0.5"/>
+  <line x1="275" y1="320" x2="275" y2="298" stroke="#334155" stroke-width="1.2"/>
+  <rect x="271" y="302" width="8" height="10" rx="1" fill="#00d4aa" opacity="0.5"/>
+  <line x1="320" y1="315" x2="320" y2="290" stroke="#334155" stroke-width="1.2"/>
+  <rect x="316" y="295" width="8" height="12" rx="1" fill="#ef4444" opacity="0.4"/>
+  <line x1="365" y1="308" x2="365" y2="278" stroke="#334155" stroke-width="1.2"/>
+  <rect x="361" y="282" width="8" height="16" rx="1" fill="#00d4aa" opacity="0.5"/>
+  <line x1="410" y1="295" x2="410" y2="272" stroke="#334155" stroke-width="1.2"/>
+  <rect x="406" y="275" width="8" height="12" rx="1" fill="#00d4aa" opacity="0.5"/>
+  <line x1="455" y1="290" x2="455" y2="265" stroke="#334155" stroke-width="1.2"/>
+  <rect x="451" y="270" width="8" height="12" rx="1" fill="#ef4444" opacity="0.4"/>
+  <line x1="500" y1="280" x2="500" y2="255" stroke="#334155" stroke-width="1.2"/>
+  <rect x="496" y="258" width="8" height="14" rx="1" fill="#00d4aa" opacity="0.5"/>
+  <line x1="545" y1="272" x2="545" y2="248" stroke="#334155" stroke-width="1.2"/>
+  <rect x="541" y="252" width="8" height="12" rx="1" fill="#00d4aa" opacity="0.5"/>
+  <line x1="590" y1="268" x2="590" y2="240" stroke="#334155" stroke-width="1.2"/>
+  <rect x="586" y="244" width="8" height="16" rx="1" fill="#ef4444" opacity="0.4"/>
+  <line x1="635" y1="258" x2="635" y2="230" stroke="#334155" stroke-width="1.2"/>
+  <rect x="631" y="234" width="8" height="14" rx="1" fill="#00d4aa" opacity="0.5"/>
+  <line x1="680" y1="248" x2="680" y2="222" stroke="#334155" stroke-width="1.2"/>
+  <rect x="676" y="225" width="8" height="15" rx="1" fill="#00d4aa" opacity="0.5"/>
+  <line x1="725" y1="240" x2="725" y2="215" stroke="#334155" stroke-width="1.2"/>
+  <rect x="721" y="218" width="8" height="14" rx="1" fill="#ef4444" opacity="0.4"/>
+  <line x1="770" y1="232" x2="770" y2="200" stroke="#334155" stroke-width="1.2"/>
+  <rect x="766" y="204" width="8" height="18" rx="1" fill="#00d4aa" opacity="0.5"/>
+
+  <polygon points="140,320 185,326 230,312 275,306 320,300 365,285 410,278 455,274 500,262 545,255 590,248 635,238 680,228 725,222 770,208 770,360 140,360" fill="url(#chartFill)"/>
+  <polyline points="140,320 185,326 230,312 275,306 320,300 365,285 410,278 455,274 500,262 545,255 590,248 635,238 680,228 725,222 770,208" fill="none" stroke="#00d4aa" stroke-width="2" stroke-linejoin="round"/>
+
+  <circle cx="770" cy="208" r="4" fill="#00d4aa" opacity="0.9"/>
+  <circle cx="770" cy="208" r="8" fill="#00d4aa" opacity="0.2" filter="url(#dotGlow)"/>
+
+  <circle cx="120" cy="50" r="1.5" fill="#00d4aa" opacity="0.3"/>
+  <circle cx="780" cy="45" r="1" fill="#00b4d8" opacity="0.4"/>
+  <circle cx="700" cy="70" r="1.5" fill="#00d4aa" opacity="0.2"/>
+  <circle cx="200" cy="80" r="1" fill="#00b4d8" opacity="0.3"/>
+  <circle cx="550" cy="55" r="1.5" fill="#00d4aa" opacity="0.25"/>
+  <circle cx="400" cy="40" r="1" fill="#00b4d8" opacity="0.35"/>
+
+  <text x="450" y="95" text-anchor="middle" fill="url(#titleGrad)" font-family="'SF Pro Display', 'Segoe UI', system-ui, -apple-system, sans-serif" font-size="80" font-weight="800" letter-spacing="10" filter="url(#textGlow)">TRADIX</text>
+  <line x1="200" y1="115" x2="700" y2="115" stroke="url(#accentLine)" stroke-width="1.5"/>
+  <text x="450" y="145" text-anchor="middle" fill="#64748b" font-family="'SF Pro Display', 'Segoe UI', system-ui, -apple-system, sans-serif" font-size="15" font-weight="500" letter-spacing="8">BACKTEST THE MARKET</text>
+
+  <text x="115" y="370" fill="#334155" font-family="monospace" font-size="9" letter-spacing="1">2020</text>
+  <text x="340" y="370" fill="#334155" font-family="monospace" font-size="9" letter-spacing="1">2022</text>
+  <text x="565" y="370" fill="#334155" font-family="monospace" font-size="9" letter-spacing="1">2024</text>
+  <text x="755" y="370" fill="#334155" font-family="monospace" font-size="9" letter-spacing="1">NOW</text>
 </svg>
