design: Redesign logo to compass-bracket mark with minimal palette
Replace the emerald starburst design (V2.0) with a new compass + code bracket (>) symbol (V3.0) using Black/White/Gray base with Bright Green (#22C55E) accent. Update all SVG assets (logos, icons, favicons) and design documentation to reflect the new brand identity.
This commit is contained in:
Luong NGUYEN
@@ -1,126 +1,63 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Emerald gradient -->
|
||||
<linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="100%" style="stop-color:#059669"/>
|
||||
</linearGradient>
|
||||
<svg width="520" height="120" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Claude How-To Logo — Dark background version -->
|
||||
|
||||
<!-- Mint gradient -->
|
||||
<linearGradient id="mintGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
||||
<stop offset="100%" style="stop-color:#34d399"/>
|
||||
</linearGradient>
|
||||
<!-- Dark background -->
|
||||
<rect width="520" height="120" fill="#0A0A0A"/>
|
||||
|
||||
<!-- Text gradient dark -->
|
||||
<linearGradient id="textDark" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#d1fae5"/>
|
||||
<stop offset="100%" style="stop-color:#a7f3d0"/>
|
||||
</linearGradient>
|
||||
<!-- === MARK === -->
|
||||
<g transform="translate(0, 0)">
|
||||
<!-- Outer compass ring -->
|
||||
<circle cx="60" cy="60" r="52" fill="none" stroke="#FFFFFF" stroke-width="3"/>
|
||||
|
||||
<!-- Dark background -->
|
||||
<linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0d1f0d"/>
|
||||
<stop offset="50%" style="stop-color:#132813"/>
|
||||
<stop offset="100%" style="stop-color:#0a1a0a"/>
|
||||
</linearGradient>
|
||||
<!-- Cardinal tick marks -->
|
||||
<line x1="60" y1="8" x2="60" y2="18" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="60" y1="102" x2="60" y2="112" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="8" y1="60" x2="18" y2="60" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="102" y1="60" x2="112" y2="60" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
|
||||
|
||||
<!-- Glow filter dark -->
|
||||
<filter id="glowDark" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feFlood flood-color="#10b981" flood-opacity="0.5"/>
|
||||
<feComposite in2="blur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Intercardinal tick marks -->
|
||||
<line x1="23.2" y1="23.2" x2="30.3" y2="30.3" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="89.7" y1="30.3" x2="96.8" y2="23.2" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="23.2" y1="96.8" x2="30.3" y2="89.7" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="89.7" y1="89.7" x2="96.8" y2="96.8" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
|
||||
<!-- Dark gradient background -->
|
||||
<rect width="800" height="200" fill="url(#bgDark)"/>
|
||||
<!-- Compass needle — north (green = direction/guidance) -->
|
||||
<polygon points="60,20 54,58 60,52 66,58" fill="#22C55E"/>
|
||||
|
||||
<!-- Subtle grid overlay -->
|
||||
<g opacity="0.02">
|
||||
<line x1="0" y1="50" x2="800" y2="50" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="0" y1="100" x2="800" y2="100" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="0" y1="150" x2="800" y2="150" stroke="#10b981" stroke-width="1"/>
|
||||
</g>
|
||||
<!-- Compass needle — south (white) -->
|
||||
<polygon points="60,100 54,62 60,68 66,62" fill="#FFFFFF"/>
|
||||
|
||||
<!-- Icon: Claude-inspired rounded starburst -->
|
||||
<g transform="translate(70, 100)">
|
||||
<!-- Central circle with glow -->
|
||||
<circle cx="0" cy="0" r="14" fill="#10b981" filter="url(#glowDark)"/>
|
||||
<circle cx="0" cy="0" r="10" fill="url(#mintGrad)"/>
|
||||
|
||||
<!-- 12 rounded rays -->
|
||||
<!-- Ray 1 (top, 0°) -->
|
||||
<path d="M 0,-15 Q -5,-32 0,-48 Q 5,-32 0,-15" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 2 (30°) -->
|
||||
<path d="M 13,-8 Q 18,-22 28,-35 Q 23,-20 13,-8" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 3 (60°) -->
|
||||
<path d="M 22,7 Q 30,15 42,28 Q 28,18 22,7" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 4 (90°, right) -->
|
||||
<path d="M 15,0 Q 32,-5 48,0 Q 32,5 15,0" fill="url(#emeraldGrad)" opacity="0.98"/>
|
||||
|
||||
<!-- Ray 5 (120°) -->
|
||||
<path d="M 22,-7 Q 30,-15 42,-28 Q 28,-18 22,-7" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 6 (150°) -->
|
||||
<path d="M 13,8 Q 18,22 28,35 Q 23,20 13,8" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 7 (180°, left) -->
|
||||
<path d="M 0,15 Q -5,32 0,48 Q 5,32 0,15" fill="url(#emeraldGrad)" opacity="0.98"/>
|
||||
|
||||
<!-- Ray 8 (210°) -->
|
||||
<path d="M -13,8 Q -18,22 -28,35 Q -23,20 -13,8" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 9 (240°) -->
|
||||
<path d="M -22,-7 Q -30,-15 -42,-28 Q -28,-18 -22,-7" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 10 (270°, bottom-left) -->
|
||||
<path d="M -15,0 Q -32,-5 -48,0 Q -32,5 -15,0" fill="url(#emeraldGrad)" opacity="0.98"/>
|
||||
|
||||
<!-- Ray 11 (300°) -->
|
||||
<path d="M -22,7 Q -30,15 -42,28 Q -28,18 -22,7" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 12 (330°) -->
|
||||
<path d="M -13,-8 Q -18,-22 -28,-35 Q -23,-20 -13,-8" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Inner detail lines -->
|
||||
<g opacity="0.8">
|
||||
<rect x="-3.5" y="-3" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
|
||||
<rect x="-3.5" y="-0.2" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
|
||||
<rect x="-3.5" y="2.6" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
|
||||
<!-- Center > bracket -->
|
||||
<g transform="translate(60, 60)">
|
||||
<polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Center dot -->
|
||||
<circle cx="60" cy="60" r="2.5" fill="#22C55E"/>
|
||||
</g>
|
||||
|
||||
<!-- Text: "Claude" -->
|
||||
<text x="160" y="98" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="58" font-weight="600" fill="url(#textDark)" letter-spacing="-1">
|
||||
Claude
|
||||
</text>
|
||||
<!-- === WORDMARK === -->
|
||||
<g transform="translate(140, 0)">
|
||||
<!-- "Claude" -->
|
||||
<text x="0" y="62" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="42" font-weight="700" fill="#FFFFFF" letter-spacing="-0.5">
|
||||
Claude
|
||||
</text>
|
||||
|
||||
<!-- Text: "How-To" -->
|
||||
<text x="160" y="138" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="44" font-weight="400" fill="#6ee7b7" letter-spacing="0.5">
|
||||
How-To
|
||||
</text>
|
||||
<!-- "How-To" -->
|
||||
<text x="0" y="98" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="32" font-weight="500" fill="rgba(255,255,255,0.6)" letter-spacing="0">
|
||||
How-To
|
||||
</text>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<text x="520" y="75" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="12" fill="#6ee7b7" letter-spacing="0.5" font-weight="500" opacity="0.85">
|
||||
VISUAL GUIDE TO CLAUDE CODE
|
||||
</text>
|
||||
<!-- Green accent line -->
|
||||
<line x1="0" y1="105" x2="126" y2="105" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
|
||||
|
||||
<!-- Accent line with glow -->
|
||||
<line x1="160" y1="153" x2="400" y2="153" stroke="url(#emeraldGrad)" stroke-width="2.5" stroke-linecap="round" opacity="0.8"/>
|
||||
|
||||
<!-- Three dots -->
|
||||
<g fill="#6ee7b7" opacity="0.8">
|
||||
<circle cx="420" cy="158" r="2.5"/>
|
||||
<circle cx="435" cy="158" r="2.5"/>
|
||||
<circle cx="450" cy="158" r="2.5"/>
|
||||
<!-- Subtitle -->
|
||||
<text x="195" y="55" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="rgba(255,255,255,0.5)" letter-spacing="1.5">
|
||||
VISUAL GUIDE
|
||||
</text>
|
||||
<text x="195" y="68" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="rgba(255,255,255,0.5)" letter-spacing="1.5">
|
||||
TO CLAUDE CODE
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 3.1 KiB |
Reference in New Issue
Block a user