mirror of
https://github.com/luongnv89/claude-howto.git
synced 2026-05-05 10:05:16 +02:00
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
@@ -0,0 +1,19 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Favicon: Simplified compass mark at 16x16 -->
|
||||||
|
|
||||||
|
<!-- Compass ring -->
|
||||||
|
<circle cx="8" cy="8" r="7" fill="none" stroke="#000000" stroke-width="1.2"/>
|
||||||
|
|
||||||
|
<!-- North needle (green) -->
|
||||||
|
<polygon points="8,2 6.8,7.5 8,6.5 9.2,7.5" fill="#22C55E"/>
|
||||||
|
|
||||||
|
<!-- South needle (dark) -->
|
||||||
|
<polygon points="8,14 6.8,8.5 8,9.5 9.2,8.5" fill="#000000"/>
|
||||||
|
|
||||||
|
<!-- > bracket simplified -->
|
||||||
|
<polyline points="6.5,5.5 9,8 6.5,10.5" fill="none" stroke="#000000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
|
<!-- Center dot -->
|
||||||
|
<circle cx="8" cy="8" r="0.8" fill="#22C55E"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 724 B |
@@ -0,0 +1,60 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="520" height="120" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Full Logo: Black monochrome version for light backgrounds -->
|
||||||
|
|
||||||
|
<!-- === MARK === -->
|
||||||
|
<g transform="translate(0, 0)">
|
||||||
|
<!-- Outer compass ring -->
|
||||||
|
<circle cx="60" cy="60" r="52" fill="none" stroke="#000000" stroke-width="3"/>
|
||||||
|
|
||||||
|
<!-- Cardinal tick marks -->
|
||||||
|
<line x1="60" y1="8" x2="60" y2="18" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<line x1="60" y1="102" x2="60" y2="112" stroke="rgba(0,0,0,0.4)" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="8" y1="60" x2="18" y2="60" stroke="rgba(0,0,0,0.4)" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="102" y1="60" x2="112" y2="60" stroke="rgba(0,0,0,0.4)" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Intercardinal tick marks -->
|
||||||
|
<line x1="23.2" y1="23.2" x2="30.3" y2="30.3" stroke="rgba(0,0,0,0.3)" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="89.7" y1="30.3" x2="96.8" y2="23.2" stroke="rgba(0,0,0,0.3)" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="23.2" y1="96.8" x2="30.3" y2="89.7" stroke="rgba(0,0,0,0.3)" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="89.7" y1="89.7" x2="96.8" y2="96.8" stroke="rgba(0,0,0,0.3)" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Compass needle — north -->
|
||||||
|
<polygon points="60,20 54,58 60,52 66,58" fill="#000000"/>
|
||||||
|
|
||||||
|
<!-- Compass needle — south -->
|
||||||
|
<polygon points="60,100 54,62 60,68 66,62" fill="rgba(0,0,0,0.4)"/>
|
||||||
|
|
||||||
|
<!-- Center > bracket -->
|
||||||
|
<g transform="translate(60, 60)">
|
||||||
|
<polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Center dot -->
|
||||||
|
<circle cx="60" cy="60" r="2.5" fill="#000000"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- === 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="#000000" letter-spacing="-0.5">
|
||||||
|
Claude
|
||||||
|
</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(0,0,0,0.5)" letter-spacing="0">
|
||||||
|
How-To
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Accent line -->
|
||||||
|
<line x1="0" y1="105" x2="126" y2="105" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- 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(0,0,0,0.4)" 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(0,0,0,0.4)" letter-spacing="1.5">
|
||||||
|
TO CLAUDE CODE
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,60 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="520" height="120" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Full Logo: Mark + Wordmark (horizontal) -->
|
||||||
|
|
||||||
|
<!-- === MARK === -->
|
||||||
|
<g transform="translate(0, 0)">
|
||||||
|
<!-- Outer compass ring -->
|
||||||
|
<circle cx="60" cy="60" r="52" fill="none" stroke="#000000" stroke-width="3"/>
|
||||||
|
|
||||||
|
<!-- Cardinal tick marks -->
|
||||||
|
<line x1="60" y1="8" x2="60" y2="18" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<line x1="60" y1="102" x2="60" y2="112" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="8" y1="60" x2="18" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="102" y1="60" x2="112" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Intercardinal tick marks -->
|
||||||
|
<line x1="23.2" y1="23.2" x2="30.3" y2="30.3" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="89.7" y1="30.3" x2="96.8" y2="23.2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="23.2" y1="96.8" x2="30.3" y2="89.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="89.7" y1="89.7" x2="96.8" y2="96.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Compass needle — north (green) -->
|
||||||
|
<polygon points="60,20 54,58 60,52 66,58" fill="#22C55E"/>
|
||||||
|
|
||||||
|
<!-- Compass needle — south (dark) -->
|
||||||
|
<polygon points="60,100 54,62 60,68 66,62" fill="#000000"/>
|
||||||
|
|
||||||
|
<!-- Center > bracket -->
|
||||||
|
<g transform="translate(60, 60)">
|
||||||
|
<polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Center dot -->
|
||||||
|
<circle cx="60" cy="60" r="2.5" fill="#22C55E"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- === 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="#000000" letter-spacing="-0.5">
|
||||||
|
Claude
|
||||||
|
</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="#6B7280" letter-spacing="0">
|
||||||
|
How-To
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Green accent line -->
|
||||||
|
<line x1="0" y1="105" x2="126" y2="105" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- 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="#6B7280" letter-spacing="1.5" text-transform="uppercase">
|
||||||
|
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="#6B7280" letter-spacing="1.5">
|
||||||
|
TO CLAUDE CODE
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,40 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- App Icon: Square with padding, rounded corners implied by container -->
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect width="512" height="512" rx="80" fill="#FFFFFF"/>
|
||||||
|
|
||||||
|
<!-- Scaled mark centered with padding -->
|
||||||
|
<g transform="translate(256, 256) scale(3.2)">
|
||||||
|
<!-- Outer compass ring -->
|
||||||
|
<circle cx="0" cy="0" r="52" fill="none" stroke="#000000" stroke-width="3"/>
|
||||||
|
|
||||||
|
<!-- Cardinal tick marks -->
|
||||||
|
<line x1="0" y1="-52" x2="0" y2="-42" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<line x1="0" y1="42" x2="0" y2="52" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="-52" y1="0" x2="-42" y2="0" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="42" y1="0" x2="52" y2="0" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Intercardinal tick marks -->
|
||||||
|
<line x1="-36.8" y1="-36.8" x2="-29.7" y2="-29.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="29.7" y1="-29.7" x2="36.8" y2="-36.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="-36.8" y1="36.8" x2="-29.7" y2="29.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="29.7" y1="29.7" x2="36.8" y2="36.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Compass needle — north (green) -->
|
||||||
|
<polygon points="0,-40 -6,-2 0,-8 6,-2" fill="#22C55E"/>
|
||||||
|
|
||||||
|
<!-- Compass needle — south (dark) -->
|
||||||
|
<polygon points="0,40 -6,2 0,8 6,2" fill="#000000"/>
|
||||||
|
|
||||||
|
<!-- Center > bracket -->
|
||||||
|
<polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
|
<!-- Center dot -->
|
||||||
|
<circle cx="0" cy="0" r="2.5" fill="#22C55E"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Subtle border -->
|
||||||
|
<rect width="512" height="512" rx="80" fill="none" stroke="#E5E7EB" stroke-width="1"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,35 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Logo Mark: Compass-bracket symbol
|
||||||
|
A compass rose with a code bracket at center, representing
|
||||||
|
"guided path through code" — the essence of Claude How-To -->
|
||||||
|
|
||||||
|
<!-- Outer compass ring -->
|
||||||
|
<circle cx="60" cy="60" r="52" fill="none" stroke="#000000" stroke-width="3"/>
|
||||||
|
|
||||||
|
<!-- Cardinal tick marks -->
|
||||||
|
<line x1="60" y1="8" x2="60" y2="18" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<line x1="60" y1="102" x2="60" y2="112" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="8" y1="60" x2="18" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="102" y1="60" x2="112" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Intercardinal tick marks (smaller) -->
|
||||||
|
<line x1="23.2" y1="23.2" x2="30.3" y2="30.3" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="89.7" y1="30.3" x2="96.8" y2="23.2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="23.2" y1="96.8" x2="30.3" y2="89.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="89.7" y1="89.7" x2="96.8" y2="96.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Compass needle — north (green accent = direction/guidance) -->
|
||||||
|
<polygon points="60,20 54,58 60,52 66,58" fill="#22C55E"/>
|
||||||
|
|
||||||
|
<!-- Compass needle — south (dark) -->
|
||||||
|
<polygon points="60,100 54,62 60,68 66,62" fill="#000000"/>
|
||||||
|
|
||||||
|
<!-- Center code bracket: > symbol (represents "how-to", next step, terminal prompt) -->
|
||||||
|
<g transform="translate(60, 60)">
|
||||||
|
<polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Small dot at center pivot -->
|
||||||
|
<circle cx="60" cy="60" r="2.5" fill="#22C55E"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,60 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="520" height="120" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Full Logo: White version for dark backgrounds -->
|
||||||
|
|
||||||
|
<!-- === MARK === -->
|
||||||
|
<g transform="translate(0, 0)">
|
||||||
|
<!-- Outer compass ring -->
|
||||||
|
<circle cx="60" cy="60" r="52" fill="none" stroke="#FFFFFF" stroke-width="3"/>
|
||||||
|
|
||||||
|
<!-- 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"/>
|
||||||
|
|
||||||
|
<!-- 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"/>
|
||||||
|
|
||||||
|
<!-- Compass needle — north (green) -->
|
||||||
|
<polygon points="60,20 54,58 60,52 66,58" fill="#22C55E"/>
|
||||||
|
|
||||||
|
<!-- Compass needle — south (white) -->
|
||||||
|
<polygon points="60,100 54,62 60,68 66,62" fill="#FFFFFF"/>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<!-- === 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>
|
||||||
|
|
||||||
|
<!-- "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>
|
||||||
|
|
||||||
|
<!-- Green accent line -->
|
||||||
|
<line x1="0" y1="105" x2="126" y2="105" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="340" height="48" viewBox="0 0 340 48" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Wordmark: "Claude How-To" -->
|
||||||
|
|
||||||
|
<!-- "Claude" in bold black -->
|
||||||
|
<text x="0" y="35" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="36" font-weight="700" fill="#000000" letter-spacing="-0.5">
|
||||||
|
Claude
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- "How-To" in medium weight with green accent -->
|
||||||
|
<text x="170" y="35" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="36" font-weight="500" fill="#6B7280" letter-spacing="-0.5">
|
||||||
|
How-To
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Green underline accent on "How-To" -->
|
||||||
|
<line x1="170" y1="42" x2="330" y2="42" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 798 B |
+91
-184
@@ -2,26 +2,25 @@
|
|||||||
|
|
||||||
## Visual Identity
|
## Visual Identity
|
||||||
|
|
||||||
### Icon Design Concept: Ascending Progression
|
### Icon Design Concept: Compass with Code Bracket
|
||||||
|
|
||||||
The Claude How To icon uses **three ascending hexagons** to represent the learning journey:
|
The Claude How To icon uses a **compass with a `>` code bracket** to represent guided navigation through code:
|
||||||
|
|
||||||
```
|
```
|
||||||
🔷 Level 7-10 (MINT)
|
N (green)
|
||||||
Advanced Features
|
▲
|
||||||
|
│
|
||||||
🔶 Level 4-6 (EMERALD)
|
W ───>─── E Compass = Guidance/Direction
|
||||||
Intermediate Skills
|
│ > Bracket = Code/Terminal/CLI
|
||||||
|
▼
|
||||||
🔹 Level 1-3 (DARK EMERALD)
|
S (black)
|
||||||
Beginner Fundamentals
|
|
||||||
```
|
```
|
||||||
|
|
||||||
This creates:
|
This creates:
|
||||||
- **Visual Clarity**: Immediate recognition of progression
|
- **Visual Clarity**: Immediately communicates "code navigation guide"
|
||||||
- **Symbolic Meaning**: Upward movement = growth & learning
|
- **Symbolic Meaning**: Compass = finding your way; `>` = code/terminal
|
||||||
- **Scalability**: Works at any size from 16px to 512px
|
- **Scalability**: Works at any size from 16px to 512px
|
||||||
- **Brand Alignment**: Matches the tech-forward CLI aesthetic
|
- **Brand Alignment**: Matches the developer tool aesthetic with minimal palette
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -31,156 +30,94 @@ This creates:
|
|||||||
|
|
||||||
| Color | Hex | RGB | Usage |
|
| Color | Hex | RGB | Usage |
|
||||||
|-------|-----|-----|-------|
|
|-------|-----|-----|-------|
|
||||||
| Deep Forest (BG) | `#0d1f0d` | 13, 31, 13 | Backgrounds, containers |
|
| Black (Primary) | `#000000` | 0, 0, 0 | Main strokes, text, south needle |
|
||||||
| Emerald (Primary) | `#10b981` | 16, 185, 129 | Main accents, buttons |
|
| White (Background) | `#FFFFFF` | 255, 255, 255 | Light backgrounds |
|
||||||
| Dark Emerald | `#059669` | 5, 150, 105 | Secondary accents, borders |
|
| Gray (Secondary) | `#6B7280` | 107, 114, 128 | Minor tick marks, secondary text |
|
||||||
| Forest | `#047857` | 4, 120, 87 | Tertiary, deep accents |
|
| Bright Green (Accent) | `#22C55E` | 34, 197, 94 | North needle, center dot, accent lines |
|
||||||
| Mint (Highlight) | `#6ee7b7` | 110, 231, 183 | Highlights, focus states |
|
| Near Black (Dark BG) | `#0A0A0A` | 10, 10, 10 | Dark mode backgrounds |
|
||||||
| Light Mint | `#34d399` | 52, 211, 153 | Secondary highlights |
|
|
||||||
|
|
||||||
### Contrast Ratios (WCAG)
|
### Contrast Ratios (WCAG)
|
||||||
|
|
||||||
- Emerald on Dark Forest: **8.2:1** ✅ AAA
|
- Black on White: **21:1** AAA
|
||||||
- Mint on Dark Forest: **9.1:1** ✅ AAA
|
- Gray on White: **4.6:1** AA
|
||||||
- All colors maintain AA compliance on dark backgrounds
|
- Green on White: **3.2:1** (decorative only, not for text)
|
||||||
|
- White on Dark: **19.5:1** AAA
|
||||||
|
|
||||||
---
|
### Accent Color Rule
|
||||||
|
|
||||||
## Gradient System
|
**Bright Green (#22C55E) is reserved for highlights only:**
|
||||||
|
- Compass north needle
|
||||||
### Primary Gradients
|
- Center dot
|
||||||
|
- Accent underlines/borders
|
||||||
**Emerald Gradient** (left→right, top→bottom):
|
- Never as a background color
|
||||||
- Start: `#10b981` (bright emerald)
|
- Never for body text
|
||||||
- End: `#047857` (dark forest green)
|
|
||||||
- Usage: Icon backgrounds, primary elements
|
|
||||||
|
|
||||||
**Mint Gradient** (top→bottom):
|
|
||||||
- Start: `#6ee7b7` (bright mint)
|
|
||||||
- End: `#34d399` (darker mint)
|
|
||||||
- Usage: Highlights, accent elements
|
|
||||||
|
|
||||||
**Dark Emerald Gradient** (left→right, top→bottom):
|
|
||||||
- Start: `#059669` (dark emerald)
|
|
||||||
- End: `#064e3b` (forest green)
|
|
||||||
- Usage: Secondary elements, depth
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Typography
|
## Typography
|
||||||
|
|
||||||
### Logo Font
|
### Logo Font
|
||||||
- **Family**: JetBrains Mono, SF Mono, Fira Code (monospace)
|
- **Family**: Inter, SF Pro Display, -apple-system, Segoe UI, sans-serif
|
||||||
- **Weight**: 700 (bold) for "Claude-", 400 (regular) for "Howto"
|
- **"Claude"**: 42px, weight 700 (bold), Black
|
||||||
- **Style**: Modern, tech-forward
|
- **"How-To"**: 32px, weight 500 (medium), Gray (#6B7280)
|
||||||
- **Usage**: Logo wordmark, code examples
|
- **Subtitle**: 10px, weight 500, Gray, letter-spacing 1.5px, uppercase
|
||||||
|
|
||||||
### Interface Font
|
### Interface Font
|
||||||
- **Family**: Inter, SF Pro, system fonts (sans-serif)
|
- **Family**: Inter, SF Pro, system fonts (sans-serif)
|
||||||
- **Weight**: 400-600
|
- **Weight**: 400-600
|
||||||
- **Style**: Clean, readable
|
- **Style**: Clean, readable
|
||||||
- **Usage**: UI text, descriptions
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Icon Details
|
## Icon Details
|
||||||
|
|
||||||
### Hexagon Specifications
|
### Compass Specifications
|
||||||
|
|
||||||
All three hexagons follow the same geometry pattern:
|
The compass mark is built from these geometric elements:
|
||||||
|
|
||||||
```svg
|
```
|
||||||
<!-- Regular hexagon with flat top -->
|
Element | Stroke/Fill | Color
|
||||||
M -26,0 <!-- Left point -->
|
--------------------|----------------|------------------
|
||||||
L -13,-22.5 <!-- Top-left corner -->
|
Outer ring | 3px stroke | Black / White (dark mode)
|
||||||
L 13,-22.5 <!-- Top-right corner -->
|
North tick | 2.5px stroke | Black / White (dark mode)
|
||||||
L 26,0 <!-- Right point -->
|
Other cardinal ticks| 2px stroke | Gray / White 50% (dark mode)
|
||||||
L 13,22.5 <!-- Bottom-right corner -->
|
Intercardinal ticks | 1.5px stroke | Gray / White 40% (dark mode)
|
||||||
L -13,22.5 <!-- Bottom-left corner -->
|
North needle | filled polygon | #22C55E (always green)
|
||||||
Z <!-- Close path -->
|
South needle | filled polygon | Black / White (dark mode)
|
||||||
|
> bracket | 3px stroke | Black / White (dark mode)
|
||||||
|
Center dot | filled circle | #22C55E (always green)
|
||||||
```
|
```
|
||||||
|
|
||||||
**Hexagon Sizes**:
|
### Size Progression
|
||||||
- Bottom (Beginner): 26 unit radius
|
|
||||||
- Middle (Intermediate): 32 unit radius
|
|
||||||
- Top (Advanced): 26 unit radius
|
|
||||||
|
|
||||||
### Visual Elements
|
```
|
||||||
|
16px → Ring + needles + chevron only (minimal)
|
||||||
1. **Strokes**: 1.5-2.5px width depending on size
|
32px → Adds cardinal tick marks
|
||||||
2. **Glows**: Soft emerald/mint blur for depth
|
64px → Adds intercardinal tick marks
|
||||||
3. **Connecting Lines**: Dashed lines showing progression
|
128px → Full detail, all elements crisp
|
||||||
4. **Center Dot**: Accent element at center point
|
256px → Maximum detail, thick strokes
|
||||||
5. **Outer Rings**: Subtle circular guides
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Sizing Guidelines
|
## Sizing Guidelines
|
||||||
|
|
||||||
### Favicon Hierarchy
|
|
||||||
|
|
||||||
```
|
|
||||||
16px → Minimal geometry, browser tab
|
|
||||||
32px → Two hexagons visible
|
|
||||||
64px → All three hexagons clear
|
|
||||||
128px → Full detail with glows
|
|
||||||
256px → Complete with all effects
|
|
||||||
```
|
|
||||||
|
|
||||||
### Logo Sizing
|
### Logo Sizing
|
||||||
|
|
||||||
- **Minimum**: 100px width (for web)
|
- **Minimum**: 200px width (for web)
|
||||||
- **Recommended**: 400-800px (high quality)
|
- **Recommended**: 520px (native size)
|
||||||
- **Maximum**: Unlimited (vector format)
|
- **Maximum**: Unlimited (vector format)
|
||||||
- **Aspect Ratio**: 4:1 (width:height)
|
- **Aspect Ratio**: ~4.3:1 (width:height)
|
||||||
|
|
||||||
### Icon Sizing
|
### Icon Sizing
|
||||||
|
|
||||||
- **Minimum**: 32px (small thumbnails)
|
- **Minimum**: 16px (favicon)
|
||||||
- **Recommended**: 64-256px (apps, avatars)
|
- **Recommended**: 64-256px (apps, avatars)
|
||||||
- **Maximum**: Unlimited (vector format)
|
- **Maximum**: Unlimited (vector format)
|
||||||
- **Aspect Ratio**: 1:1 (square)
|
- **Aspect Ratio**: 1:1 (square)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Effects & Filters
|
|
||||||
|
|
||||||
### Glow Effect
|
|
||||||
|
|
||||||
```svg
|
|
||||||
<filter id="softGlow">
|
|
||||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
|
||||||
<feFlood flood-color="#10b981" flood-opacity="0.4"/>
|
|
||||||
<feComposite in2="blur" operator="in"/>
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
```
|
|
||||||
|
|
||||||
Creates: Soft green glow around elements
|
|
||||||
|
|
||||||
### Shadow Effect
|
|
||||||
|
|
||||||
```svg
|
|
||||||
<filter id="shadow">
|
|
||||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
|
||||||
<feOffset dx="2" dy="4" result="offsetblur"/>
|
|
||||||
<feComponentTransfer>
|
|
||||||
<feFuncA type="linear" slope="0.3"/>
|
|
||||||
</feComponentTransfer>
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
```
|
|
||||||
|
|
||||||
Creates: Subtle drop shadow for depth
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Spacing & Alignment
|
## Spacing & Alignment
|
||||||
|
|
||||||
### Logo Spacing
|
### Logo Spacing
|
||||||
@@ -189,18 +126,19 @@ Creates: Subtle drop shadow for depth
|
|||||||
┌─────────────────────────────────────┐
|
┌─────────────────────────────────────┐
|
||||||
│ │
|
│ │
|
||||||
│ Clear Space Minimum │
|
│ Clear Space Minimum │
|
||||||
│ (logo width / 4) │
|
│ (logo height / 2) │
|
||||||
│ │
|
│ │
|
||||||
│ [LOGO] │
|
│ [COMPASS] Claude │
|
||||||
|
│ How-To │
|
||||||
│ │
|
│ │
|
||||||
└─────────────────────────────────────┘
|
└─────────────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
### Icon Center Point
|
### Icon Center Point
|
||||||
|
|
||||||
All icons center at (128, 128) for 256px canvas:
|
All icons center at the midpoint of their canvas:
|
||||||
- Allows proper scaling and transformation
|
- 128×128 for 256px canvas
|
||||||
- Centers vertically and horizontally
|
- 64×64 for 128px canvas
|
||||||
- Maintains alignment with other UI elements
|
- Maintains alignment with other UI elements
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -208,49 +146,42 @@ All icons center at (128, 128) for 256px canvas:
|
|||||||
## Accessibility
|
## Accessibility
|
||||||
|
|
||||||
### Color Contrast
|
### Color Contrast
|
||||||
- All foreground/background combinations meet WCAG AAA
|
- All text meets WCAG AA (4.5:1 minimum)
|
||||||
|
- Green accent is decorative, not informational
|
||||||
- No red-green color dependency
|
- No red-green color dependency
|
||||||
- Works for color-blind users
|
|
||||||
|
|
||||||
### Scalability
|
### Scalability
|
||||||
- Vector format ensures clarity at any size
|
- Vector format ensures clarity at any size
|
||||||
- Geometric shapes remain recognizable at 16px
|
- Geometric shapes remain recognizable at 16px
|
||||||
- Maintains proportions when scaled
|
- Progressive detail based on available size
|
||||||
|
|
||||||
### Animation Safe
|
|
||||||
- SVG can be animated if needed
|
|
||||||
- Static by default for performance
|
|
||||||
- Use CSS/JS for interactive states
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Application Examples
|
## Application Examples
|
||||||
|
|
||||||
### Web Header
|
### Web Header
|
||||||
- Size: 800×200px
|
- Size: 520×120px logo
|
||||||
- File: `logos/claude-howto-logo.svg`
|
- File: `logos/claude-howto-logo.svg`
|
||||||
- Background: Transparent or dark
|
- Background: White or dark (#0A0A0A)
|
||||||
- Padding: 20px minimum
|
- Padding: 20px minimum
|
||||||
|
|
||||||
### App Icon
|
### App Icon
|
||||||
- Size: 256×256px or larger
|
- Size: 256×256px
|
||||||
- File: `icons/claude-howto-icon.svg`
|
- File: `icons/claude-howto-icon.svg`
|
||||||
- Background: Dark or transparent
|
- Background: White or dark
|
||||||
- Use: App shortcuts, avatars
|
- Use: App shortcuts, avatars
|
||||||
|
|
||||||
### Browser Favicon
|
### Browser Favicon
|
||||||
- Size: 32px (primary), 16px (fallback)
|
- Size: 32px (primary), 16px (fallback)
|
||||||
- File: `favicons/favicon-32.svg`
|
- File: `favicons/favicon-32.svg`
|
||||||
- Format: SVG for crisp display
|
- Format: SVG for crisp display
|
||||||
- Use: Browser tabs, bookmarks
|
|
||||||
|
|
||||||
### Social Media
|
### Social Media
|
||||||
- Profile: 256×256px icon
|
- Profile: 256×256px icon
|
||||||
- Banner: 800×200px logo (centered)
|
- Banner: 520×120px logo (centered)
|
||||||
- Story/Post: Icon at 1080×1080px
|
|
||||||
|
|
||||||
### Documentation
|
### Documentation
|
||||||
- Chapter Headers: 400×100px logo
|
- Chapter Headers: Logo scaled to fit
|
||||||
- Section Icons: 64×64px favicon
|
- Section Icons: 64×64px favicon
|
||||||
- Inline: 32×32px favicon
|
- Inline: 32×32px favicon
|
||||||
|
|
||||||
@@ -260,78 +191,54 @@ All icons center at (128, 128) for 256px canvas:
|
|||||||
|
|
||||||
### SVG Structure
|
### SVG Structure
|
||||||
|
|
||||||
All SVG files include:
|
All SVG files are flat design:
|
||||||
- XML declaration
|
- No gradients (solid colors only)
|
||||||
- `<defs>` section with gradients and filters
|
- No filter effects (no blur, glow, or shadow)
|
||||||
- ViewBox attribute for responsiveness
|
- Clean stroke and fill geometry
|
||||||
- Named gradients for reuse
|
- ViewBox for responsive scaling
|
||||||
- Readable code structure
|
- Readable, commented code
|
||||||
|
|
||||||
### Optimization
|
|
||||||
|
|
||||||
Files are optimized but readable:
|
|
||||||
- Maintains whitespace for clarity
|
|
||||||
- Includes comments where helpful
|
|
||||||
- Gradients named for easy reference
|
|
||||||
- Filters documented in code
|
|
||||||
|
|
||||||
### Cross-Browser Compatibility
|
### Cross-Browser Compatibility
|
||||||
|
|
||||||
- ✅ Chrome/Edge: Full support
|
- Chrome/Edge: Full support
|
||||||
- ✅ Firefox: Full support
|
- Firefox: Full support
|
||||||
- ✅ Safari: Full support
|
- Safari: Full support
|
||||||
- ✅ iOS Safari: Full support
|
- iOS Safari: Full support
|
||||||
- ✅ All modern browsers: Full support
|
- All modern browsers: Full support
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Changing Colors
|
### Changing the Accent Color
|
||||||
|
|
||||||
To create variants with different colors:
|
To create variants with a different accent:
|
||||||
|
|
||||||
1. Replace gradient stop colors:
|
1. Replace all instances of `#22C55E` with your accent color
|
||||||
```svg
|
2. Ensure contrast ratio stays above 3:1 for decorative elements
|
||||||
<stop offset="0%" style="stop-color:#NEW_COLOR"/>
|
3. Keep black/white/gray structure unchanged
|
||||||
```
|
|
||||||
|
|
||||||
2. Update filter colors:
|
|
||||||
```svg
|
|
||||||
<feFlood flood-color="#NEW_COLOR" flood-opacity="0.4"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
3. Keep contrast ratios above 4.5:1 for accessibility
|
|
||||||
|
|
||||||
### Scaling
|
### Scaling
|
||||||
|
|
||||||
To scale any icon:
|
|
||||||
```css
|
```css
|
||||||
svg {
|
svg {
|
||||||
width: 256px;
|
width: 256px;
|
||||||
height: 256px;
|
height: 256px;
|
||||||
transform: scale(1.5);
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Or in SVG:
|
SVGs scale automatically via viewBox — no transforms needed.
|
||||||
```svg
|
|
||||||
<svg transform="scale(2)">
|
|
||||||
<!-- content -->
|
|
||||||
</svg>
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Version Control
|
## Version Control
|
||||||
|
|
||||||
Track design changes in git:
|
Track design changes in git:
|
||||||
- Use `.gitkeep` in empty directories
|
|
||||||
- Version SVG files normally (they're text)
|
- Version SVG files normally (they're text)
|
||||||
- Tag releases with design changes
|
- Tag releases with design changes
|
||||||
- Include DESIGN-SYSTEM.md in commits
|
- Include DESIGN-SYSTEM.md in commits
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Last Updated**: January 2026
|
**Last Updated**: February 2026
|
||||||
**Design System Version**: 1.0
|
**Design System Version**: 3.0
|
||||||
|
|||||||
+15
-14
@@ -18,7 +18,7 @@ cp resources/favicons/* /path/to/your/website/public/
|
|||||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
|
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
|
||||||
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
|
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
|
||||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
|
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
|
||||||
<meta name="theme-color" content="#0d1f0d">
|
<meta name="theme-color" content="#000000">
|
||||||
```
|
```
|
||||||
|
|
||||||
## Use in Markdown/Documentation
|
## Use in Markdown/Documentation
|
||||||
@@ -35,7 +35,7 @@ cp resources/favicons/* /path/to/your/website/public/
|
|||||||
|
|
||||||
| Purpose | Size | File |
|
| Purpose | Size | File |
|
||||||
|---------|------|------|
|
|---------|------|------|
|
||||||
| Website header | 800×200 | `logos/claude-howto-logo.svg` |
|
| Website header | 520×120 | `logos/claude-howto-logo.svg` |
|
||||||
| App icon | 256×256 | `icons/claude-howto-icon.svg` |
|
| App icon | 256×256 | `icons/claude-howto-icon.svg` |
|
||||||
| Browser tab | 32×32 | `favicons/favicon-32.svg` |
|
| Browser tab | 32×32 | `favicons/favicon-32.svg` |
|
||||||
| Mobile home screen | 128×128 | `favicons/favicon-128.svg` |
|
| Mobile home screen | 128×128 | `favicons/favicon-128.svg` |
|
||||||
@@ -46,28 +46,29 @@ cp resources/favicons/* /path/to/your/website/public/
|
|||||||
|
|
||||||
```css
|
```css
|
||||||
/* Use these in your CSS */
|
/* Use these in your CSS */
|
||||||
--color-bg-dark: #0d1f0d;
|
--color-primary: #000000;
|
||||||
--color-emerald: #10b981;
|
--color-secondary: #6B7280;
|
||||||
--color-emerald-dark: #059669;
|
--color-accent: #22C55E;
|
||||||
--color-emerald-forest: #047857;
|
--color-bg-light: #FFFFFF;
|
||||||
--color-mint: #6ee7b7;
|
--color-bg-dark: #0A0A0A;
|
||||||
--color-mint-light: #34d399;
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Icon Design Meaning
|
## Icon Design Meaning
|
||||||
|
|
||||||
**Ascending Hexagons Represent**:
|
**Compass with Code Bracket**:
|
||||||
- 🟢 Bottom (Dark Emerald) = Beginner (Levels 1-3)
|
- Compass ring = Navigation, structured learning path
|
||||||
- 🟢 Middle (Bright Emerald) = Intermediate (Levels 4-6)
|
- Green north needle = Direction, progress, guidance
|
||||||
- 🟢 Top (Mint) = Advanced (Levels 7-10)
|
- Black south needle = Grounding, solid foundation
|
||||||
|
- `>` bracket = Terminal prompt, code, CLI context
|
||||||
|
- Tick marks = Precision, structured steps
|
||||||
|
|
||||||
This symbolizes the learning progression from basics to mastery.
|
This symbolizes "finding your way through code with clear guidance."
|
||||||
|
|
||||||
## What to Use Where
|
## What to Use Where
|
||||||
|
|
||||||
### Website
|
### Website
|
||||||
- **Header**: Logo (`logos/claude-howto-logo.svg`)
|
- **Header**: Logo (`logos/claude-howto-logo.svg`)
|
||||||
- **Favicon**: 32-bit (`favicons/favicon-32.svg`)
|
- **Favicon**: 32px (`favicons/favicon-32.svg`)
|
||||||
- **Social preview**: Icon (`icons/claude-howto-icon.svg`)
|
- **Social preview**: Icon (`icons/claude-howto-icon.svg`)
|
||||||
|
|
||||||
### GitHub
|
### GitHub
|
||||||
|
|||||||
+89
-65
@@ -5,15 +5,15 @@
|
|||||||
|
|
||||||
# Claude How To - Brand Assets
|
# Claude How To - Brand Assets
|
||||||
|
|
||||||
Complete collection of logos, icons, and favicons for the Claude How To project. All assets use the new V2.0 design: a 12-ray organic starburst inspired by Claude's official logo, with emerald green color and educational symbolism.
|
Complete collection of logos, icons, and favicons for the Claude How To project. All assets use the V3.0 design: a compass with code bracket (`>`) symbol, representing guided navigation through code — using a Black/White/Gray palette with Bright Green (#22C55E) accent.
|
||||||
|
|
||||||
## Directory Structure
|
## Directory Structure
|
||||||
|
|
||||||
```
|
```
|
||||||
resources/
|
resources/
|
||||||
├── logos/
|
├── logos/
|
||||||
│ ├── claude-howto-logo.svg # Main logo - Light mode (800×200px)
|
│ ├── claude-howto-logo.svg # Main logo - Light mode (520×120px)
|
||||||
│ └── claude-howto-logo-dark.svg # Main logo - Dark mode (800×200px)
|
│ └── claude-howto-logo-dark.svg # Main logo - Dark mode (520×120px)
|
||||||
├── icons/
|
├── icons/
|
||||||
│ ├── claude-howto-icon.svg # App icon - Light mode (256×256px)
|
│ ├── claude-howto-icon.svg # App icon - Light mode (256×256px)
|
||||||
│ └── claude-howto-icon-dark.svg # App icon - Dark mode (256×256px)
|
│ └── claude-howto-icon-dark.svg # App icon - Dark mode (256×256px)
|
||||||
@@ -25,16 +25,28 @@ resources/
|
|||||||
└── favicon-256.svg # Favicon - 256×256px
|
└── favicon-256.svg # Favicon - 256×256px
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Additional assets in `assets/logo/`:
|
||||||
|
```
|
||||||
|
assets/logo/
|
||||||
|
├── logo-full.svg # Mark + wordmark (horizontal)
|
||||||
|
├── logo-mark.svg # Compass symbol only (120×120px)
|
||||||
|
├── logo-wordmark.svg # Text only
|
||||||
|
├── logo-icon.svg # App icon (512×512, rounded)
|
||||||
|
├── favicon.svg # 16×16 optimized
|
||||||
|
├── logo-white.svg # White version for dark backgrounds
|
||||||
|
└── logo-black.svg # Black monochrome version
|
||||||
|
```
|
||||||
|
|
||||||
## Assets Overview
|
## Assets Overview
|
||||||
|
|
||||||
### Design Concept (V2.0)
|
### Design Concept (V3.0)
|
||||||
|
|
||||||
**12-Ray Organic Starburst** inspired by Claude's official logo:
|
**Compass with Code Bracket** — guidance meets code:
|
||||||
- **12 Rays** = Knowledge radiating outward
|
- **Compass Ring** = Navigation, finding your way
|
||||||
- **Emerald Gradient** = Primary green color (#10b981 → #059669)
|
- **North Needle (Green)** = Direction, progress on the learning path
|
||||||
- **Mint Core** = Learning value provided
|
- **South Needle (Black)** = Grounding, solid foundation
|
||||||
- **Three Inner Lines** = Guides, examples, documentation
|
- **`>` Bracket** = Terminal prompt, code, CLI context
|
||||||
- **Claude-Aligned** = Matches official Claude logo pattern
|
- **Tick Marks** = Precision, structured learning
|
||||||
|
|
||||||
### Logos
|
### Logos
|
||||||
|
|
||||||
@@ -43,15 +55,15 @@ resources/
|
|||||||
- `logos/claude-howto-logo-dark.svg` (Dark mode)
|
- `logos/claude-howto-logo-dark.svg` (Dark mode)
|
||||||
|
|
||||||
**Specifications**:
|
**Specifications**:
|
||||||
- **Size**: 800×200 px
|
- **Size**: 520×120 px
|
||||||
- **Purpose**: Main header/branding logo with wordmark
|
- **Purpose**: Main header/branding logo with wordmark
|
||||||
- **Usage**:
|
- **Usage**:
|
||||||
- Website headers
|
- Website headers
|
||||||
- Marketing materials
|
|
||||||
- README badges
|
- README badges
|
||||||
|
- Marketing materials
|
||||||
- Print materials
|
- Print materials
|
||||||
- **Format**: SVG (fully scalable)
|
- **Format**: SVG (fully scalable)
|
||||||
- **Modes**: Light (white background) & Dark (forest background)
|
- **Modes**: Light (white background) & Dark (#0A0A0A background)
|
||||||
|
|
||||||
### Icons
|
### Icons
|
||||||
|
|
||||||
@@ -68,14 +80,14 @@ resources/
|
|||||||
- Social media thumbnails
|
- Social media thumbnails
|
||||||
- Documentation headers
|
- Documentation headers
|
||||||
- **Format**: SVG (fully scalable)
|
- **Format**: SVG (fully scalable)
|
||||||
- **Modes**: Light (white background) & Dark (with glow effect)
|
- **Modes**: Light (white background) & Dark (#0A0A0A background)
|
||||||
|
|
||||||
**Design Elements**:
|
**Design Elements**:
|
||||||
- 12-ray organic starburst (Claude-inspired)
|
- Compass ring with cardinal and intercardinal tick marks
|
||||||
- Emerald green gradient rays
|
- Green north needle (direction/guidance)
|
||||||
- Mint gradient core (represents guide hub)
|
- Black south needle (foundation)
|
||||||
- Three inner lines (symbolize guides/examples/docs)
|
- `>` code bracket at center (terminal/CLI)
|
||||||
- Glow effects in dark mode
|
- Green center dot accent
|
||||||
|
|
||||||
### Favicons
|
### Favicons
|
||||||
|
|
||||||
@@ -90,8 +102,9 @@ Optimized versions at multiple sizes for web use:
|
|||||||
| `favicon-256.svg` | 256×256 px | 4x | Modern browsers, PWA icons |
|
| `favicon-256.svg` | 256×256 px | 4x | Modern browsers, PWA icons |
|
||||||
|
|
||||||
**Optimization Notes**:
|
**Optimization Notes**:
|
||||||
- Smaller sizes (16-32px) use simplified geometry
|
- 16px: Minimal geometry — ring, needles, chevron only
|
||||||
- Larger sizes (64-256px) include additional details
|
- 32px: Adds cardinal tick marks
|
||||||
|
- 64px+: Full detail with intercardinal ticks
|
||||||
- All maintain visual consistency with main icon
|
- All maintain visual consistency with main icon
|
||||||
- SVG format ensures crisp display at any size
|
- SVG format ensures crisp display at any size
|
||||||
|
|
||||||
@@ -129,54 +142,63 @@ Optimized versions at multiple sizes for web use:
|
|||||||
<link rel="shortcut icon" href="/resources/favicons/favicon-256.svg">
|
<link rel="shortcut icon" href="/resources/favicons/favicon-256.svg">
|
||||||
|
|
||||||
<!-- PWA manifest reference (if using manifest.json) -->
|
<!-- PWA manifest reference (if using manifest.json) -->
|
||||||
<meta name="theme-color" content="#0d1f0d">
|
<meta name="theme-color" content="#000000">
|
||||||
</head>
|
</head>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Color Palette
|
## Color Palette
|
||||||
|
|
||||||
### Primary Colors
|
### Primary Colors
|
||||||
- **Deep Forest**: `#0d1f0d` (Background)
|
- **Black**: `#000000` (Primary text, strokes, south needle)
|
||||||
- **Emerald**: `#10b981` (Primary accent)
|
- **White**: `#FFFFFF` (Light backgrounds)
|
||||||
- **Dark Emerald**: `#059669` (Secondary)
|
- **Gray**: `#6B7280` (Secondary text, minor tick marks)
|
||||||
- **Forest**: `#047857` (Tertiary)
|
|
||||||
|
|
||||||
### Accent Colors
|
### Accent Color
|
||||||
- **Mint**: `#6ee7b7` (Highlight)
|
- **Bright Green**: `#22C55E` (North needle, center dot, accent lines — highlights only, never as background)
|
||||||
- **Light Mint**: `#34d399` (Secondary highlight)
|
|
||||||
|
### Dark Mode
|
||||||
|
- **Background**: `#0A0A0A` (Near-black)
|
||||||
|
|
||||||
|
### CSS Variables
|
||||||
|
```css
|
||||||
|
--color-primary: #000000;
|
||||||
|
--color-secondary: #6B7280;
|
||||||
|
--color-accent: #22C55E;
|
||||||
|
--color-bg-light: #FFFFFF;
|
||||||
|
--color-bg-dark: #0A0A0A;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Tailwind Config
|
||||||
|
```js
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
primary: '#000000',
|
||||||
|
secondary: '#6B7280',
|
||||||
|
accent: '#22C55E',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### Usage Guidelines
|
### Usage Guidelines
|
||||||
- Use emerald for primary interactions and accents
|
- Use black for primary text and structural elements
|
||||||
- Use mint for highlights and emphasis
|
- Use gray for secondary/supporting elements
|
||||||
- Deep forest for backgrounds
|
- Use green **only** for highlights — needle, dots, accent lines
|
||||||
- Maintain sufficient contrast for accessibility
|
- Never use green as a background color
|
||||||
|
- Maintain WCAG AA contrast (4.5:1 minimum)
|
||||||
|
|
||||||
## Design Guidelines
|
## Design Guidelines
|
||||||
|
|
||||||
### Logo Usage
|
### Logo Usage
|
||||||
✅ **Do**:
|
- Use on white or dark (#0A0A0A) backgrounds
|
||||||
- Use on dark backgrounds
|
- Scale proportionally
|
||||||
- Scale proportionally (maintain 4:1 aspect ratio)
|
- Include clear space around logo (minimum: logo height / 2)
|
||||||
- Include clear space around logo
|
- Use provided light/dark variants for appropriate backgrounds
|
||||||
- Use in color as shown
|
|
||||||
|
|
||||||
❌ **Don't**:
|
|
||||||
- Change colors or gradients
|
|
||||||
- Stretch or distort proportions
|
|
||||||
- Use on light backgrounds without modification
|
|
||||||
- Apply effects that obscure the design
|
|
||||||
|
|
||||||
### Icon Usage
|
### Icon Usage
|
||||||
✅ **Do**:
|
|
||||||
- Use at standard sizes: 16, 32, 64, 128, 256px
|
- Use at standard sizes: 16, 32, 64, 128, 256px
|
||||||
- Maintain the ascending progression concept
|
- Maintain the compass proportions
|
||||||
- Scale proportionally
|
- Scale proportionally
|
||||||
|
|
||||||
❌ **Don't**:
|
|
||||||
- Rotate or flip the icon
|
|
||||||
- Change the color scheme
|
|
||||||
- Use small sizes where details are lost
|
|
||||||
|
|
||||||
### Favicon Usage
|
### Favicon Usage
|
||||||
- Use appropriate size for context
|
- Use appropriate size for context
|
||||||
- 16-32px: Browser tabs, bookmarks
|
- 16-32px: Browser tabs, bookmarks
|
||||||
@@ -185,11 +207,11 @@ Optimized versions at multiple sizes for web use:
|
|||||||
|
|
||||||
## SVG Optimization
|
## SVG Optimization
|
||||||
|
|
||||||
All SVG files include:
|
All SVG files are flat design with no gradients or filters:
|
||||||
- Gradient definitions for smooth color transitions
|
- Clean stroke-based geometry
|
||||||
- Filter effects for depth and glow
|
- No embedded rasters
|
||||||
- Optimized stroke widths
|
- Optimized paths
|
||||||
- Responsive design patterns
|
- Responsive viewBox
|
||||||
|
|
||||||
For web optimization:
|
For web optimization:
|
||||||
```bash
|
```bash
|
||||||
@@ -219,24 +241,26 @@ inkscape -D -z --file=favicon-256.svg --export-png=favicon-256.png
|
|||||||
|
|
||||||
## Accessibility
|
## Accessibility
|
||||||
|
|
||||||
- All icons include clear geometric shapes
|
- High contrast color ratios (WCAG AA compliant — 4.5:1 minimum)
|
||||||
- High contrast color ratios (WCAG AA compliant)
|
- Clean geometric shapes recognizable at all sizes
|
||||||
- Scalable vector format works at any size
|
- Scalable vector format
|
||||||
- No text in icons (text added separately if needed)
|
- No text in icons (text added separately in wordmark)
|
||||||
|
- No red-green color dependency for meaning
|
||||||
|
|
||||||
## Attribution
|
## Attribution
|
||||||
|
|
||||||
These assets are part of the Claude How To project and use Anthropic's Claude color palette and design language.
|
These assets are part of the Claude How To project.
|
||||||
|
|
||||||
**License**: MIT (see project LICENSE file)
|
**License**: MIT (see project LICENSE file)
|
||||||
|
|
||||||
## Version History
|
## Version History
|
||||||
|
|
||||||
- **v2.0** (January 2026): Claude-inspired 12-ray starburst design with dark/light mode variants
|
- **v3.0** (February 2026): Compass-bracket design with Black/White/Gray + Green accent palette
|
||||||
|
- **v2.0** (January 2026): Claude-inspired 12-ray starburst design with emerald palette
|
||||||
- **v1.0** (January 2026): Original hexagon-based progression icon design
|
- **v1.0** (January 2026): Original hexagon-based progression icon design
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Last Updated**: January 2026
|
**Last Updated**: February 2026
|
||||||
**Current Version**: 2.0 (Claude-Inspired Starburst)
|
**Current Version**: 3.0 (Compass-Bracket)
|
||||||
**All Assets**: Production-ready SVG, fully scalable, WCAG AAA accessible
|
**All Assets**: Production-ready SVG, fully scalable, WCAG AA accessible
|
||||||
|
|||||||
@@ -1,63 +1,29 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
|
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<!-- Favicon 128x128: High detail compass -->
|
||||||
<linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
|
<circle cx="64" cy="64" r="56" fill="none" stroke="#000000" stroke-width="2.5"/>
|
||||||
<stop offset="0%" style="stop-color:#10b981"/>
|
|
||||||
<stop offset="100%" style="stop-color:#059669"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
||||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
|
||||||
<stop offset="100%" style="stop-color:#34d399"/>
|
|
||||||
</linearGradient>
|
|
||||||
<filter id="glow">
|
|
||||||
<feGaussianBlur stdDeviation="1.5" result="blur"/>
|
|
||||||
<feFlood flood-color="#10b981" flood-opacity="0.4"/>
|
|
||||||
<feComposite in2="blur" operator="in"/>
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- White background -->
|
<!-- Cardinal ticks -->
|
||||||
<circle cx="64" cy="64" r="64" fill="#ffffff"/>
|
<line x1="64" y1="8" x2="64" y2="18" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<line x1="64" y1="110" x2="64" y2="120" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="8" y1="64" x2="18" y2="64" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="110" y1="64" x2="120" y2="64" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Starburst (8 rays for 128px) -->
|
<!-- Intercardinal ticks -->
|
||||||
<g transform="translate(64, 64)">
|
<line x1="24.4" y1="24.4" x2="31.5" y2="31.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
<!-- Ray 1 (top) -->
|
<line x1="96.5" y1="31.5" x2="103.6" y2="24.4" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
<path d="M 0,-48 Q -8,-72 0,-96 Q 8,-72 0,-48" fill="url(#emerald)" opacity="0.95"/>
|
<line x1="24.4" y1="103.6" x2="31.5" y2="96.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="96.5" y1="96.5" x2="103.6" y2="103.6" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Ray 2 (top-right) -->
|
<!-- North needle (green) -->
|
||||||
<path d="M 34,-34 Q 40,-60 64,-80 Q 48,-48 34,-34" fill="url(#emerald)" opacity="0.92"/>
|
<polygon points="64,21 58,62 64,56 70,62" fill="#22C55E"/>
|
||||||
|
|
||||||
<!-- Ray 3 (right) -->
|
<!-- South needle (dark) -->
|
||||||
<path d="M 48,0 Q 72,-16 96,0 Q 72,16 48,0" fill="url(#emerald)" opacity="0.95"/>
|
<polygon points="64,107 58,66 64,72 70,66" fill="#000000"/>
|
||||||
|
|
||||||
<!-- Ray 4 (bottom-right) -->
|
<!-- > bracket -->
|
||||||
<path d="M 34,34 Q 48,48 64,80 Q 40,60 34,34" fill="url(#emerald)" opacity="0.92"/>
|
<polyline points="55,50 71,64 55,78" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
<!-- Ray 5 (bottom) -->
|
<!-- Center dot -->
|
||||||
<path d="M 0,48 Q -8,72 0,96 Q 8,72 0,48" fill="url(#emerald)" opacity="0.95"/>
|
<circle cx="64" cy="64" r="2.5" fill="#22C55E"/>
|
||||||
|
|
||||||
<!-- Ray 6 (bottom-left) -->
|
|
||||||
<path d="M -34,34 Q -48,48 -64,80 Q -40,60 -34,34" fill="url(#emerald)" opacity="0.92"/>
|
|
||||||
|
|
||||||
<!-- Ray 7 (left) -->
|
|
||||||
<path d="M -48,0 Q -72,-16 -96,0 Q -72,16 -48,0" fill="url(#emerald)" opacity="0.95"/>
|
|
||||||
|
|
||||||
<!-- Ray 8 (top-left) -->
|
|
||||||
<path d="M -34,-34 Q -40,-60 -64,-80 Q -48,-48 -34,-34" fill="url(#emerald)" opacity="0.92"/>
|
|
||||||
|
|
||||||
<!-- Center core -->
|
|
||||||
<circle cx="0" cy="0" r="20" fill="#10b981" filter="url(#glow)"/>
|
|
||||||
<circle cx="0" cy="0" r="12" fill="url(#mint)"/>
|
|
||||||
|
|
||||||
<!-- Three inner lines representing guides -->
|
|
||||||
<g opacity="0.7">
|
|
||||||
<rect x="-8" y="-4" width="16" height="2" fill="#0d1f0d" rx="1"/>
|
|
||||||
<rect x="-8" y="1" width="16" height="2" fill="#0d1f0d" rx="1"/>
|
|
||||||
<rect x="-8" y="6" width="16" height="2" fill="#0d1f0d" rx="1"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -1,40 +1,9 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<!-- Favicon 16x16: Minimal compass -->
|
||||||
<linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
|
<circle cx="8" cy="8" r="7" fill="none" stroke="#000000" stroke-width="1.2"/>
|
||||||
<stop offset="0%" style="stop-color:#10b981"/>
|
<polygon points="8,2 6.8,7.5 8,6.5 9.2,7.5" fill="#22C55E"/>
|
||||||
<stop offset="100%" style="stop-color:#059669"/>
|
<polygon points="8,14 6.8,8.5 8,9.5 9.2,8.5" fill="#000000"/>
|
||||||
</linearGradient>
|
<polyline points="6.5,5.5 9,8 6.5,10.5" fill="none" stroke="#000000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
|
<circle cx="8" cy="8" r="0.8" fill="#22C55E"/>
|
||||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
|
||||||
<stop offset="100%" style="stop-color:#34d399"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- White background -->
|
|
||||||
<circle cx="8" cy="8" r="8" fill="#ffffff"/>
|
|
||||||
|
|
||||||
<!-- Simplified starburst (8 rays for 16px) -->
|
|
||||||
<g transform="translate(8, 8)">
|
|
||||||
<!-- Ray 1 (top) -->
|
|
||||||
<path d="M 0,-6 L 1,-3 L 0,-1.5 L -1,-3 Z" fill="url(#emerald)"/>
|
|
||||||
<!-- Ray 2 (top-right) -->
|
|
||||||
<path d="M 4,-4 L 4.5,-2 L 3,-0.5 L 2,-2 Z" fill="url(#emerald)"/>
|
|
||||||
<!-- Ray 3 (right) -->
|
|
||||||
<path d="M 6,0 L 3,1 L 1.5,0 L 3,-1 Z" fill="url(#emerald)"/>
|
|
||||||
<!-- Ray 4 (bottom-right) -->
|
|
||||||
<path d="M 4,4 L 2,2 L 3,0.5 L 4.5,2 Z" fill="url(#emerald)"/>
|
|
||||||
<!-- Ray 5 (bottom) -->
|
|
||||||
<path d="M 0,6 L -1,3 L 0,1.5 L 1,3 Z" fill="url(#emerald)"/>
|
|
||||||
<!-- Ray 6 (bottom-left) -->
|
|
||||||
<path d="M -4,4 L -2,2 L -3,0.5 L -4.5,2 Z" fill="url(#emerald)"/>
|
|
||||||
<!-- Ray 7 (left) -->
|
|
||||||
<path d="M -6,0 L -3,1 L -1.5,0 L -3,-1 Z" fill="url(#emerald)"/>
|
|
||||||
<!-- Ray 8 (top-left) -->
|
|
||||||
<path d="M -4,-4 L -4.5,-2 L -3,-0.5 L -2,-2 Z" fill="url(#emerald)"/>
|
|
||||||
|
|
||||||
<!-- Center core -->
|
|
||||||
<circle cx="0" cy="0" r="2" fill="#10b981"/>
|
|
||||||
<circle cx="0" cy="0" r="1.2" fill="url(#mint)"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 567 B |
@@ -1,75 +1,29 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<!-- Favicon 256x256: Maximum detail compass -->
|
||||||
<linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
<circle cx="128" cy="128" r="112" fill="none" stroke="#000000" stroke-width="3"/>
|
||||||
<stop offset="0%" style="stop-color:#10b981"/>
|
|
||||||
<stop offset="100%" style="stop-color:#059669"/>
|
|
||||||
</linearGradient>
|
|
||||||
<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>
|
|
||||||
<filter id="glow">
|
|
||||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
|
||||||
<feFlood flood-color="#10b981" flood-opacity="0.4"/>
|
|
||||||
<feComposite in2="blur" operator="in"/>
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- White background -->
|
<!-- Cardinal ticks -->
|
||||||
<circle cx="128" cy="128" r="128" fill="#ffffff"/>
|
<line x1="128" y1="16" x2="128" y2="36" stroke="#000000" stroke-width="3" stroke-linecap="round"/>
|
||||||
|
<line x1="128" y1="220" x2="128" y2="240" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="16" y1="128" x2="36" y2="128" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="220" y1="128" x2="240" y2="128" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Icon: 12-ray starburst -->
|
<!-- Intercardinal ticks -->
|
||||||
<g transform="translate(128, 128)">
|
<line x1="48.8" y1="48.8" x2="62.9" y2="62.9" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
<!-- Ray 1 (top) -->
|
<line x1="193.1" y1="62.9" x2="207.2" y2="48.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
<path d="M 0,-80 Q -10,-64 0,-96 Q 10,-64 0,-80" fill="url(#emeraldGrad)" opacity="0.95"/>
|
<line x1="48.8" y1="207.2" x2="62.9" y2="193.1" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="193.1" y1="193.1" x2="207.2" y2="207.2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Ray 2 (30°) -->
|
<!-- North needle (green) -->
|
||||||
<path d="M 26,-16 Q 36,-44 56,-70 Q 46,-40 26,-16" fill="url(#emeraldGrad)" opacity="0.92"/>
|
<polygon points="128,42 116,124 128,112 140,124" fill="#22C55E"/>
|
||||||
|
|
||||||
<!-- Ray 3 (60°) -->
|
<!-- South needle (dark) -->
|
||||||
<path d="M 44,14 Q 60,30 84,56 Q 56,36 44,14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
<polygon points="128,214 116,132 128,144 140,132" fill="#000000"/>
|
||||||
|
|
||||||
<!-- Ray 4 (90°, right) -->
|
<!-- > bracket -->
|
||||||
<path d="M 30,0 Q 64,-10 96,0 Q 64,10 30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
<polyline points="110,100 142,128 110,156" fill="none" stroke="#000000" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
<!-- Ray 5 (120°) -->
|
<!-- Center dot -->
|
||||||
<path d="M 44,-14 Q 60,-30 84,-56 Q 56,-36 44,-14" fill="url(#emeraldGrad)" opacity="0.92"/>
|
<circle cx="128" cy="128" r="4" fill="#22C55E"/>
|
||||||
|
|
||||||
<!-- Ray 6 (150°) -->
|
|
||||||
<path d="M 26,16 Q 36,44 56,70 Q 46,40 26,16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
||||||
|
|
||||||
<!-- Ray 7 (180°, left) -->
|
|
||||||
<path d="M 0,80 Q -10,64 0,96 Q 10,64 0,80" fill="url(#emeraldGrad)" opacity="0.94"/>
|
|
||||||
|
|
||||||
<!-- Ray 8 (210°) -->
|
|
||||||
<path d="M -26,16 Q -36,44 -56,70 Q -46,40 -26,16" fill="url(#emeraldGrad)" opacity="0.92"/>
|
|
||||||
|
|
||||||
<!-- Ray 9 (240°) -->
|
|
||||||
<path d="M -44,-14 Q -60,-30 -84,-56 Q -56,-36 -44,-14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
||||||
|
|
||||||
<!-- Ray 10 (270°) -->
|
|
||||||
<path d="M -30,0 Q -64,-10 -96,0 Q -64,10 -30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
|
||||||
|
|
||||||
<!-- Ray 11 (300°) -->
|
|
||||||
<path d="M -44,14 Q -60,30 -84,56 Q -56,36 -44,14" fill="url(#emeraldGrad)" opacity="0.92"/>
|
|
||||||
|
|
||||||
<!-- Ray 12 (330°) -->
|
|
||||||
<path d="M -26,-16 Q -36,-44 -56,-70 Q -46,-40 -26,-16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
||||||
|
|
||||||
<!-- Central core -->
|
|
||||||
<circle cx="0" cy="0" r="28" fill="#10b981" filter="url(#glow)"/>
|
|
||||||
<circle cx="0" cy="0" r="20" fill="url(#mintGrad)"/>
|
|
||||||
|
|
||||||
<!-- Three inner lines -->
|
|
||||||
<g opacity="0.7">
|
|
||||||
<rect x="-7" y="-6" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
|
||||||
<rect x="-7" y="-0.4" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
|
||||||
<rect x="-7" y="5.2" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 1.6 KiB |
@@ -1,40 +1,23 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<!-- Favicon 32x32: Compass with tick marks -->
|
||||||
<linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
|
<circle cx="16" cy="16" r="14" fill="none" stroke="#000000" stroke-width="1.5"/>
|
||||||
<stop offset="0%" style="stop-color:#10b981"/>
|
|
||||||
<stop offset="100%" style="stop-color:#059669"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
||||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
|
||||||
<stop offset="100%" style="stop-color:#34d399"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- White background -->
|
<!-- Cardinal ticks -->
|
||||||
<circle cx="16" cy="16" r="16" fill="#ffffff"/>
|
<line x1="16" y1="2" x2="16" y2="5" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="16" y1="27" x2="16" y2="30" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
|
||||||
|
<line x1="2" y1="16" x2="5" y2="16" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
|
||||||
|
<line x1="27" y1="16" x2="30" y2="16" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Starburst (8 rays for 32px) -->
|
<!-- North needle (green) -->
|
||||||
<g transform="translate(16, 16)">
|
<polygon points="16,5 14.5,15 16,13.5 17.5,15" fill="#22C55E"/>
|
||||||
<!-- Ray 1 (top) -->
|
|
||||||
<path d="M 0,-12 Q -2,-18 0,-24 Q 2,-18 0,-12" fill="url(#emerald)" opacity="0.95"/>
|
|
||||||
<!-- Ray 2 (top-right) -->
|
|
||||||
<path d="M 8,-8 Q 10,-15 16,-20 Q 12,-12 8,-8" fill="url(#emerald)" opacity="0.92"/>
|
|
||||||
<!-- Ray 3 (right) -->
|
|
||||||
<path d="M 12,0 Q 18,-4 24,0 Q 18,4 12,0" fill="url(#emerald)" opacity="0.95"/>
|
|
||||||
<!-- Ray 4 (bottom-right) -->
|
|
||||||
<path d="M 8,8 Q 12,12 16,20 Q 10,15 8,8" fill="url(#emerald)" opacity="0.92"/>
|
|
||||||
<!-- Ray 5 (bottom) -->
|
|
||||||
<path d="M 0,12 Q -2,18 0,24 Q 2,18 0,12" fill="url(#emerald)" opacity="0.95"/>
|
|
||||||
<!-- Ray 6 (bottom-left) -->
|
|
||||||
<path d="M -8,8 Q -12,12 -16,20 Q -10,15 -8,8" fill="url(#emerald)" opacity="0.92"/>
|
|
||||||
<!-- Ray 7 (left) -->
|
|
||||||
<path d="M -12,0 Q -18,-4 -24,0 Q -18,4 -12,0" fill="url(#emerald)" opacity="0.95"/>
|
|
||||||
<!-- Ray 8 (top-left) -->
|
|
||||||
<path d="M -8,-8 Q -10,-15 -16,-20 Q -12,-12 -8,-8" fill="url(#emerald)" opacity="0.92"/>
|
|
||||||
|
|
||||||
<!-- Center core -->
|
<!-- South needle (dark) -->
|
||||||
<circle cx="0" cy="0" r="5" fill="#10b981"/>
|
<polygon points="16,27 14.5,17 16,18.5 17.5,17" fill="#000000"/>
|
||||||
<circle cx="0" cy="0" r="3" fill="url(#mint)"/>
|
|
||||||
</g>
|
<!-- > bracket -->
|
||||||
|
<polyline points="13.5,12 17.5,16 13.5,20" fill="none" stroke="#000000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
|
<!-- Center dot -->
|
||||||
|
<circle cx="16" cy="16" r="1.2" fill="#22C55E"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,49 +1,29 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<!-- Favicon 64x64: Full compass detail -->
|
||||||
<linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
|
<circle cx="32" cy="32" r="28" fill="none" stroke="#000000" stroke-width="2"/>
|
||||||
<stop offset="0%" style="stop-color:#10b981"/>
|
|
||||||
<stop offset="100%" style="stop-color:#059669"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
||||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
|
||||||
<stop offset="100%" style="stop-color:#34d399"/>
|
|
||||||
</linearGradient>
|
|
||||||
<filter id="glow">
|
|
||||||
<feGaussianBlur stdDeviation="1" result="blur"/>
|
|
||||||
<feFlood flood-color="#10b981" flood-opacity="0.3"/>
|
|
||||||
<feComposite in2="blur" operator="in"/>
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- White background -->
|
<!-- Cardinal ticks -->
|
||||||
<circle cx="32" cy="32" r="32" fill="#ffffff"/>
|
<line x1="32" y1="4" x2="32" y2="10" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="32" y1="54" x2="32" y2="60" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="4" y1="32" x2="10" y2="32" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="54" y1="32" x2="60" y2="32" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Starburst (8 rays for 64px) -->
|
<!-- Intercardinal ticks -->
|
||||||
<g transform="translate(32, 32)">
|
<line x1="12.2" y1="12.2" x2="16" y2="16" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
|
||||||
<!-- Ray 1 (top) -->
|
<line x1="48" y1="16" x2="51.8" y2="12.2" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
|
||||||
<path d="M 0,-24 Q -4,-36 0,-48 Q 4,-36 0,-24" fill="url(#emerald)" opacity="0.95"/>
|
<line x1="12.2" y1="51.8" x2="16" y2="48" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
|
||||||
<!-- Ray 2 (top-right) -->
|
<line x1="48" y1="48" x2="51.8" y2="51.8" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
|
||||||
<path d="M 17,-17 Q 20,-30 32,-40 Q 24,-24 17,-17" fill="url(#emerald)" opacity="0.92"/>
|
|
||||||
<!-- Ray 3 (right) -->
|
|
||||||
<path d="M 24,0 Q 36,-8 48,0 Q 36,8 24,0" fill="url(#emerald)" opacity="0.95"/>
|
|
||||||
<!-- Ray 4 (bottom-right) -->
|
|
||||||
<path d="M 17,17 Q 24,24 32,40 Q 20,30 17,17" fill="url(#emerald)" opacity="0.92"/>
|
|
||||||
<!-- Ray 5 (bottom) -->
|
|
||||||
<path d="M 0,24 Q -4,36 0,48 Q 4,36 0,24" fill="url(#emerald)" opacity="0.95"/>
|
|
||||||
<!-- Ray 6 (bottom-left) -->
|
|
||||||
<path d="M -17,17 Q -24,24 -32,40 Q -20,30 -17,17" fill="url(#emerald)" opacity="0.92"/>
|
|
||||||
<!-- Ray 7 (left) -->
|
|
||||||
<path d="M -24,0 Q -36,-8 -48,0 Q -36,8 -24,0" fill="url(#emerald)" opacity="0.95"/>
|
|
||||||
<!-- Ray 8 (top-left) -->
|
|
||||||
<path d="M -17,-17 Q -20,-30 -32,-40 Q -24,-24 -17,-17" fill="url(#emerald)" opacity="0.92"/>
|
|
||||||
|
|
||||||
<!-- Center core -->
|
<!-- North needle (green) -->
|
||||||
<circle cx="0" cy="0" r="10" fill="#10b981" filter="url(#glow)"/>
|
<polygon points="32,11 29,31 32,28 35,31" fill="#22C55E"/>
|
||||||
<circle cx="0" cy="0" r="6" fill="url(#mint)"/>
|
|
||||||
</g>
|
<!-- South needle (dark) -->
|
||||||
|
<polygon points="32,53 29,33 32,36 35,33" fill="#000000"/>
|
||||||
|
|
||||||
|
<!-- > bracket -->
|
||||||
|
<polyline points="27,24 35,32 27,40" fill="none" stroke="#000000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
|
<!-- Center dot -->
|
||||||
|
<circle cx="32" cy="32" r="1.8" fill="#22C55E"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -1,80 +1,37 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<!-- Claude How-To Icon — Dark mode (256x256) -->
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
||||||
<stop offset="0%" style="stop-color:#0d1f0d"/>
|
|
||||||
<stop offset="100%" style="stop-color:#051515"/>
|
|
||||||
</linearGradient>
|
|
||||||
<filter id="glowDark">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Dark background -->
|
<!-- Dark background -->
|
||||||
<circle cx="128" cy="128" r="128" fill="url(#bgDark)"/>
|
<circle cx="128" cy="128" r="128" fill="#0A0A0A"/>
|
||||||
|
|
||||||
<!-- Icon: Rounded starburst dark mode -->
|
<!-- Compass mark centered -->
|
||||||
<g transform="translate(128, 128)">
|
<g transform="translate(128, 128) scale(1.9)">
|
||||||
<!-- Central core with glow -->
|
<!-- Outer compass ring -->
|
||||||
<circle cx="0" cy="0" r="28" fill="#10b981" filter="url(#glowDark)"/>
|
<circle cx="0" cy="0" r="52" fill="none" stroke="#FFFFFF" stroke-width="3"/>
|
||||||
<circle cx="0" cy="0" r="20" fill="url(#mintGrad)"/>
|
|
||||||
|
|
||||||
<!-- 12 rays -->
|
<!-- Cardinal tick marks -->
|
||||||
<!-- Ray 1 (top) -->
|
<line x1="0" y1="-52" x2="0" y2="-42" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
<path d="M 0,-30 Q -10,-64 0,-96 Q 10,-64 0,-30" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
<line x1="0" y1="42" x2="0" y2="52" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="-52" y1="0" x2="-42" y2="0" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="42" y1="0" x2="52" y2="0" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Ray 2 (30°) -->
|
<!-- Intercardinal tick marks -->
|
||||||
<path d="M 26,-16 Q 36,-44 56,-70 Q 46,-40 26,-16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
<line x1="-36.8" y1="-36.8" x2="-29.7" y2="-29.7" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="29.7" y1="-29.7" x2="36.8" y2="-36.8" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="-36.8" y1="36.8" x2="-29.7" y2="29.7" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="29.7" y1="29.7" x2="36.8" y2="36.8" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Ray 3 (60°) -->
|
<!-- Compass needle — north (green) -->
|
||||||
<path d="M 44,14 Q 60,30 84,56 Q 56,36 44,14" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
<polygon points="0,-40 -6,-2 0,-8 6,-2" fill="#22C55E"/>
|
||||||
|
|
||||||
<!-- Ray 4 (90°, right) -->
|
<!-- Compass needle — south (white) -->
|
||||||
<path d="M 30,0 Q 64,-10 96,0 Q 64,10 30,0" fill="url(#emeraldGrad)" opacity="0.98"/>
|
<polygon points="0,40 -6,2 0,8 6,2" fill="#FFFFFF"/>
|
||||||
|
|
||||||
<!-- Ray 5 (120°) -->
|
<!-- Center > bracket -->
|
||||||
<path d="M 44,-14 Q 60,-30 84,-56 Q 56,-36 44,-14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
<polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
<!-- Ray 6 (150°) -->
|
<!-- Center dot -->
|
||||||
<path d="M 26,16 Q 36,44 56,70 Q 46,40 26,16" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
<circle cx="0" cy="0" r="2.5" fill="#22C55E"/>
|
||||||
|
|
||||||
<!-- Ray 7 (180°, left) -->
|
|
||||||
<path d="M 0,30 Q -10,64 0,96 Q 10,64 0,30" fill="url(#emeraldGrad)" opacity="0.98"/>
|
|
||||||
|
|
||||||
<!-- Ray 8 (210°) -->
|
|
||||||
<path d="M -26,16 Q -36,44 -56,70 Q -46,40 -26,16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
||||||
|
|
||||||
<!-- Ray 9 (240°) -->
|
|
||||||
<path d="M -44,-14 Q -60,-30 -84,-56 Q -56,-36 -44,-14" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
|
||||||
|
|
||||||
<!-- Ray 10 (270°) -->
|
|
||||||
<path d="M -30,0 Q -64,-10 -96,0 Q -64,10 -30,0" fill="url(#emeraldGrad)" opacity="0.98"/>
|
|
||||||
|
|
||||||
<!-- Ray 11 (300°) -->
|
|
||||||
<path d="M -44,14 Q -60,30 -84,56 Q -56,36 -44,14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
||||||
|
|
||||||
<!-- Ray 12 (330°) -->
|
|
||||||
<path d="M -26,-16 Q -36,-44 -56,-70 Q -46,-40 -26,-16" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
|
||||||
|
|
||||||
<!-- Inner detail lines -->
|
|
||||||
<g opacity="0.8">
|
|
||||||
<rect x="-7" y="-6" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
|
||||||
<rect x="-7" y="-0.4" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
|
||||||
<rect x="-7" y="5.2" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 1.9 KiB |
@@ -1,76 +1,37 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<!-- Claude How-To Icon — Light mode (256x256) -->
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<filter id="glow">
|
|
||||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
|
||||||
<feFlood flood-color="#10b981" flood-opacity="0.3"/>
|
|
||||||
<feComposite in2="blur" operator="in"/>
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- White background -->
|
<!-- White background -->
|
||||||
<circle cx="128" cy="128" r="128" fill="#ffffff"/>
|
<circle cx="128" cy="128" r="128" fill="#FFFFFF"/>
|
||||||
|
|
||||||
<!-- Icon: Rounded starburst -->
|
<!-- Compass mark centered -->
|
||||||
<g transform="translate(128, 128)">
|
<g transform="translate(128, 128) scale(1.9)">
|
||||||
<!-- Central core -->
|
<!-- Outer compass ring -->
|
||||||
<circle cx="0" cy="0" r="28" fill="#10b981" filter="url(#glow)"/>
|
<circle cx="0" cy="0" r="52" fill="none" stroke="#000000" stroke-width="3"/>
|
||||||
<circle cx="0" cy="0" r="20" fill="url(#mintGrad)"/>
|
|
||||||
|
|
||||||
<!-- 12 rays - scaled up for 256px -->
|
<!-- Cardinal tick marks -->
|
||||||
<!-- Ray 1 (top) -->
|
<line x1="0" y1="-52" x2="0" y2="-42" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
<path d="M 0,-30 Q -10,-64 0,-96 Q 10,-64 0,-30" fill="url(#emeraldGrad)" opacity="0.95"/>
|
<line x1="0" y1="42" x2="0" y2="52" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="-52" y1="0" x2="-42" y2="0" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="42" y1="0" x2="52" y2="0" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Ray 2 (30°) -->
|
<!-- Intercardinal tick marks -->
|
||||||
<path d="M 26,-16 Q 36,-44 56,-70 Q 46,-40 26,-16" fill="url(#emeraldGrad)" opacity="0.92"/>
|
<line x1="-36.8" y1="-36.8" x2="-29.7" y2="-29.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="29.7" y1="-29.7" x2="36.8" y2="-36.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="-36.8" y1="36.8" x2="-29.7" y2="29.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="29.7" y1="29.7" x2="36.8" y2="36.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Ray 3 (60°) -->
|
<!-- Compass needle — north (green) -->
|
||||||
<path d="M 44,14 Q 60,30 84,56 Q 56,36 44,14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
<polygon points="0,-40 -6,-2 0,-8 6,-2" fill="#22C55E"/>
|
||||||
|
|
||||||
<!-- Ray 4 (90°, right) -->
|
<!-- Compass needle — south (dark) -->
|
||||||
<path d="M 30,0 Q 64,-10 96,0 Q 64,10 30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
<polygon points="0,40 -6,2 0,8 6,2" fill="#000000"/>
|
||||||
|
|
||||||
<!-- Ray 5 (120°) -->
|
<!-- Center > bracket -->
|
||||||
<path d="M 44,-14 Q 60,-30 84,-56 Q 56,-36 44,-14" fill="url(#emeraldGrad)" opacity="0.92"/>
|
<polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
<!-- Ray 6 (150°) -->
|
<!-- Center dot -->
|
||||||
<path d="M 26,16 Q 36,44 56,70 Q 46,40 26,16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
<circle cx="0" cy="0" r="2.5" fill="#22C55E"/>
|
||||||
|
|
||||||
<!-- Ray 7 (180°, left) -->
|
|
||||||
<path d="M 0,30 Q -10,64 0,96 Q 10,64 0,30" fill="url(#emeraldGrad)" opacity="0.94"/>
|
|
||||||
|
|
||||||
<!-- Ray 8 (210°) -->
|
|
||||||
<path d="M -26,16 Q -36,44 -56,70 Q -46,40 -26,16" fill="url(#emeraldGrad)" opacity="0.92"/>
|
|
||||||
|
|
||||||
<!-- Ray 9 (240°) -->
|
|
||||||
<path d="M -44,-14 Q -60,-30 -84,-56 Q -56,-36 -44,-14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
||||||
|
|
||||||
<!-- Ray 10 (270°) -->
|
|
||||||
<path d="M -30,0 Q -64,-10 -96,0 Q -64,10 -30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
|
||||||
|
|
||||||
<!-- Ray 11 (300°) -->
|
|
||||||
<path d="M -44,14 Q -60,30 -84,56 Q -56,36 -44,14" fill="url(#emeraldGrad)" opacity="0.92"/>
|
|
||||||
|
|
||||||
<!-- Ray 12 (330°) -->
|
|
||||||
<path d="M -26,-16 Q -36,-44 -56,-70 Q -46,-40 -26,-16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
||||||
|
|
||||||
<!-- Inner detail lines -->
|
|
||||||
<g opacity="0.7">
|
|
||||||
<rect x="-7" y="-6" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
|
||||||
<rect x="-7" y="-0.4" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
|
||||||
<rect x="-7" y="5.2" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 1.8 KiB |
@@ -1,126 +1,63 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
|
<svg width="520" height="120" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<!-- Claude How-To Logo — Dark background version -->
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- Mint gradient -->
|
<!-- Dark background -->
|
||||||
<linearGradient id="mintGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
<rect width="520" height="120" fill="#0A0A0A"/>
|
||||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
|
||||||
<stop offset="100%" style="stop-color:#34d399"/>
|
|
||||||
</linearGradient>
|
|
||||||
|
|
||||||
<!-- Text gradient dark -->
|
<!-- === MARK === -->
|
||||||
<linearGradient id="textDark" x1="0%" y1="0%" x2="100%" y2="0%">
|
<g transform="translate(0, 0)">
|
||||||
<stop offset="0%" style="stop-color:#d1fae5"/>
|
<!-- Outer compass ring -->
|
||||||
<stop offset="100%" style="stop-color:#a7f3d0"/>
|
<circle cx="60" cy="60" r="52" fill="none" stroke="#FFFFFF" stroke-width="3"/>
|
||||||
</linearGradient>
|
|
||||||
|
|
||||||
<!-- Dark background -->
|
<!-- Cardinal tick marks -->
|
||||||
<linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
|
<line x1="60" y1="8" x2="60" y2="18" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
<stop offset="0%" style="stop-color:#0d1f0d"/>
|
<line x1="60" y1="102" x2="60" y2="112" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
|
||||||
<stop offset="50%" style="stop-color:#132813"/>
|
<line x1="8" y1="60" x2="18" y2="60" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
|
||||||
<stop offset="100%" style="stop-color:#0a1a0a"/>
|
<line x1="102" y1="60" x2="112" y2="60" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
|
||||||
</linearGradient>
|
|
||||||
|
|
||||||
<!-- Glow filter dark -->
|
<!-- Intercardinal tick marks -->
|
||||||
<filter id="glowDark" x="-50%" y="-50%" width="200%" height="200%">
|
<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"/>
|
||||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
<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"/>
|
||||||
<feFlood flood-color="#10b981" flood-opacity="0.5"/>
|
<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"/>
|
||||||
<feComposite in2="blur" operator="in"/>
|
<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"/>
|
||||||
<feMerge>
|
|
||||||
<feMergeNode/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- Dark gradient background -->
|
<!-- Compass needle — north (green = direction/guidance) -->
|
||||||
<rect width="800" height="200" fill="url(#bgDark)"/>
|
<polygon points="60,20 54,58 60,52 66,58" fill="#22C55E"/>
|
||||||
|
|
||||||
<!-- Subtle grid overlay -->
|
<!-- Compass needle — south (white) -->
|
||||||
<g opacity="0.02">
|
<polygon points="60,100 54,62 60,68 66,62" fill="#FFFFFF"/>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Icon: Claude-inspired rounded starburst -->
|
<!-- Center > bracket -->
|
||||||
<g transform="translate(70, 100)">
|
<g transform="translate(60, 60)">
|
||||||
<!-- Central circle with glow -->
|
<polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<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"/>
|
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
|
<!-- Center dot -->
|
||||||
|
<circle cx="60" cy="60" r="2.5" fill="#22C55E"/>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<!-- Text: "Claude" -->
|
<!-- === WORDMARK === -->
|
||||||
<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">
|
<g transform="translate(140, 0)">
|
||||||
Claude
|
<!-- "Claude" -->
|
||||||
</text>
|
<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" -->
|
<!-- "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">
|
<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
|
How-To
|
||||||
</text>
|
</text>
|
||||||
|
|
||||||
<!-- Subtitle -->
|
<!-- Green accent line -->
|
||||||
<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">
|
<line x1="0" y1="105" x2="126" y2="105" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
|
||||||
VISUAL GUIDE TO CLAUDE CODE
|
|
||||||
</text>
|
|
||||||
|
|
||||||
<!-- Accent line with glow -->
|
<!-- Subtitle -->
|
||||||
<line x1="160" y1="153" x2="400" y2="153" stroke="url(#emeraldGrad)" stroke-width="2.5" stroke-linecap="round" opacity="0.8"/>
|
<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
|
||||||
<!-- Three dots -->
|
</text>
|
||||||
<g fill="#6ee7b7" opacity="0.8">
|
<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">
|
||||||
<circle cx="420" cy="158" r="2.5"/>
|
TO CLAUDE CODE
|
||||||
<circle cx="435" cy="158" r="2.5"/>
|
</text>
|
||||||
<circle cx="450" cy="158" r="2.5"/>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 3.1 KiB |
@@ -1,106 +1,63 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
|
<svg width="520" height="120" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<!-- Claude How-To Logo — Light background version -->
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- Text gradient light -->
|
|
||||||
<linearGradient id="textLight" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
||||||
<stop offset="0%" style="stop-color:#0d1f0d"/>
|
|
||||||
<stop offset="100%" style="stop-color:#047857"/>
|
|
||||||
</linearGradient>
|
|
||||||
|
|
||||||
<!-- Glow filter -->
|
|
||||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
|
||||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
|
||||||
<feFlood flood-color="#10b981" flood-opacity="0.3"/>
|
|
||||||
<feComposite in2="blur" operator="in"/>
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- White background -->
|
<!-- White background -->
|
||||||
<rect width="800" height="200" fill="#ffffff"/>
|
<rect width="520" height="120" fill="#FFFFFF"/>
|
||||||
|
|
||||||
<!-- Icon: Claude-inspired rounded starburst with guide elements -->
|
<!-- === MARK === -->
|
||||||
<g transform="translate(70, 100)">
|
<g transform="translate(0, 0)">
|
||||||
<!-- Central circle -->
|
<!-- Outer compass ring -->
|
||||||
<circle cx="0" cy="0" r="14" fill="#10b981" filter="url(#glow)"/>
|
<circle cx="60" cy="60" r="52" fill="none" stroke="#000000" stroke-width="3"/>
|
||||||
<circle cx="0" cy="0" r="10" fill="#6ee7b7" opacity="0.9"/>
|
|
||||||
|
|
||||||
<!-- 12 rounded rays (inspired by Claude's organic design) -->
|
<!-- Cardinal tick marks -->
|
||||||
<!-- Ray 1 (top, 0°) -->
|
<line x1="60" y1="8" x2="60" y2="18" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
<path d="M 0,-15 Q -5,-32 0,-48 Q 5,-32 0,-15" fill="url(#emeraldGrad)" opacity="0.95"/>
|
<line x1="60" y1="102" x2="60" y2="112" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="8" y1="60" x2="18" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="102" y1="60" x2="112" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Ray 2 (30°) -->
|
<!-- Intercardinal tick marks -->
|
||||||
<path d="M 13,-8 Q 18,-22 28,-35 Q 23,-20 13,-8" fill="url(#emeraldGrad)" opacity="0.92"/>
|
<line x1="23.2" y1="23.2" x2="30.3" y2="30.3" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="89.7" y1="30.3" x2="96.8" y2="23.2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="23.2" y1="96.8" x2="30.3" y2="89.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="89.7" y1="89.7" x2="96.8" y2="96.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
|
||||||
<!-- Ray 3 (60°) -->
|
<!-- Compass needle — north (green = direction/guidance) -->
|
||||||
<path d="M 22,7 Q 30,15 42,28 Q 28,18 22,7" fill="url(#emeraldGrad)" opacity="0.95"/>
|
<polygon points="60,20 54,58 60,52 66,58" fill="#22C55E"/>
|
||||||
|
|
||||||
<!-- Ray 4 (90°, right) -->
|
<!-- Compass needle — south (dark) -->
|
||||||
<path d="M 15,0 Q 32,-5 48,0 Q 32,5 15,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
<polygon points="60,100 54,62 60,68 66,62" fill="#000000"/>
|
||||||
|
|
||||||
<!-- Ray 5 (120°) -->
|
<!-- Center > bracket (code/terminal prompt) -->
|
||||||
<path d="M 22,-7 Q 30,-15 42,-28 Q 28,-18 22,-7" fill="url(#emeraldGrad)" opacity="0.92"/>
|
<g transform="translate(60, 60)">
|
||||||
|
<polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<!-- Ray 6 (150°) -->
|
|
||||||
<path d="M 13,8 Q 18,22 28,35 Q 23,20 13,8" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
||||||
|
|
||||||
<!-- Ray 7 (180°, left) -->
|
|
||||||
<path d="M 0,15 Q -5,32 0,48 Q 5,32 0,15" fill="url(#emeraldGrad)" opacity="0.94"/>
|
|
||||||
|
|
||||||
<!-- Ray 8 (210°) -->
|
|
||||||
<path d="M -13,8 Q -18,22 -28,35 Q -23,20 -13,8" fill="url(#emeraldGrad)" opacity="0.92"/>
|
|
||||||
|
|
||||||
<!-- Ray 9 (240°) -->
|
|
||||||
<path d="M -22,-7 Q -30,-15 -42,-28 Q -28,-18 -22,-7" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
||||||
|
|
||||||
<!-- 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.94"/>
|
|
||||||
|
|
||||||
<!-- Ray 11 (300°) -->
|
|
||||||
<path d="M -22,7 Q -30,15 -42,28 Q -28,18 -22,7" fill="url(#emeraldGrad)" opacity="0.92"/>
|
|
||||||
|
|
||||||
<!-- Ray 12 (330°) -->
|
|
||||||
<path d="M -13,-8 Q -18,-22 -28,-35 Q -23,-20 -13,-8" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
||||||
|
|
||||||
<!-- Inner detail lines in core (representing guide/examples) -->
|
|
||||||
<g opacity="0.7">
|
|
||||||
<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"/>
|
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
|
<!-- Center dot -->
|
||||||
|
<circle cx="60" cy="60" r="2.5" fill="#22C55E"/>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<!-- Text: "Claude" -->
|
<!-- === WORDMARK === -->
|
||||||
<text x="160" y="98" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="58" font-weight="600" fill="#0d1f0d" letter-spacing="-1">
|
<g transform="translate(140, 0)">
|
||||||
Claude
|
<!-- "Claude" -->
|
||||||
</text>
|
<text x="0" y="62" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="42" font-weight="700" fill="#000000" letter-spacing="-0.5">
|
||||||
|
Claude
|
||||||
|
</text>
|
||||||
|
|
||||||
<!-- Text: "How-To" -->
|
<!-- "How-To" -->
|
||||||
<text x="160" y="138" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="44" font-weight="400" fill="#10b981" letter-spacing="0.5">
|
<text x="0" y="98" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="32" font-weight="500" fill="#6B7280" letter-spacing="0">
|
||||||
How-To
|
How-To
|
||||||
</text>
|
</text>
|
||||||
|
|
||||||
<!-- Subtitle -->
|
<!-- Green accent line -->
|
||||||
<text x="520" y="75" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="12" fill="#6b7280" letter-spacing="0.5" font-weight="500">
|
<line x1="0" y1="105" x2="126" y2="105" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
|
||||||
VISUAL GUIDE TO CLAUDE CODE
|
|
||||||
</text>
|
|
||||||
|
|
||||||
<!-- Accent line -->
|
<!-- Subtitle -->
|
||||||
<line x1="160" y1="153" x2="400" y2="153" stroke="url(#emeraldGrad)" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
|
<text x="195" y="55" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="#6B7280" letter-spacing="1.5">
|
||||||
|
VISUAL GUIDE
|
||||||
<!-- Three dots representing progression/examples -->
|
</text>
|
||||||
<g fill="#10b981" opacity="0.75">
|
<text x="195" y="68" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="#6B7280" letter-spacing="1.5">
|
||||||
<circle cx="420" cy="158" r="2.5"/>
|
TO CLAUDE CODE
|
||||||
<circle cx="435" cy="158" r="2.5"/>
|
</text>
|
||||||
<circle cx="450" cy="158" r="2.5"/>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 3.0 KiB |
Reference in New Issue
Block a user