mirror of
https://github.com/luongnv89/claude-howto.git
synced 2026-06-05 22:36:34 +02:00
design: Redesign logo with green terminal aesthetic
This commit is contained in:
Luong NGUYEN
+136
-46
@@ -1,72 +1,162 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Background gradient -->
|
||||
<defs>
|
||||
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#16213e;stop-opacity:1" />
|
||||
<!-- Main background gradient - deep forest -->
|
||||
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0d1f0d"/>
|
||||
<stop offset="50%" style="stop-color:#132813"/>
|
||||
<stop offset="100%" style="stop-color:#0a1a0a"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
|
||||
<stop offset="50%" style="stop-color:#ee5a6f;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#c44569;stop-opacity:1" />
|
||||
<!-- Primary green gradient - vibrant emerald -->
|
||||
<linearGradient id="emeraldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="50%" style="stop-color:#059669"/>
|
||||
<stop offset="100%" style="stop-color:#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Accent gradient - mint highlight -->
|
||||
<linearGradient id="mintGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
||||
<stop offset="100%" style="stop-color:#34d399"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Text gradient -->
|
||||
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#4ecdc4;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#44a08d;stop-opacity:1" />
|
||||
<stop offset="0%" style="stop-color:#ecfdf5"/>
|
||||
<stop offset="100%" style="stop-color:#d1fae5"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
|
||||
<!-- Glow effect -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feFlood flood-color="#10b981" flood-opacity="0.6"/>
|
||||
<feComposite in2="blur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Subtle inner glow for icon -->
|
||||
<filter id="innerGlow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
|
||||
</filter>
|
||||
|
||||
<!-- Noise texture -->
|
||||
<filter id="noise">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" result="noise"/>
|
||||
<feColorMatrix type="saturate" values="0"/>
|
||||
<feBlend in="SourceGraphic" in2="noise" mode="overlay" />
|
||||
</filter>
|
||||
|
||||
<!-- Leaf/organic shape for decoration -->
|
||||
<path id="leaf" d="M0,0 Q5,-10 15,-8 Q25,-5 20,5 Q15,15 5,12 Q-5,10 0,0" fill="url(#emeraldGradient)"/>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="200" rx="20" fill="url(#bgGradient)"/>
|
||||
<!-- Background with rounded corners -->
|
||||
<rect width="800" height="200" rx="16" fill="url(#bgGradient)"/>
|
||||
|
||||
<!-- Icon - Stylized book/guide with code symbol -->
|
||||
<g transform="translate(40, 50)">
|
||||
<!-- Book -->
|
||||
<rect x="0" y="0" width="100" height="100" rx="8" fill="url(#iconGradient)" opacity="0.9"/>
|
||||
<rect x="5" y="5" width="90" height="90" rx="6" fill="#1a1a2e" opacity="0.3"/>
|
||||
|
||||
<!-- Pages effect -->
|
||||
<line x1="15" y1="25" x2="85" y2="25" stroke="#fff" stroke-width="2" opacity="0.3"/>
|
||||
<line x1="15" y1="45" x2="85" y2="45" stroke="#fff" stroke-width="2" opacity="0.3"/>
|
||||
<line x1="15" y1="65" x2="85" y2="65" stroke="#fff" stroke-width="2" opacity="0.3"/>
|
||||
|
||||
<!-- Code brackets -->
|
||||
<text x="25" y="60" font-family="monospace" font-size="40" font-weight="bold" fill="#4ecdc4" filter="url(#glow)"></></text>
|
||||
|
||||
<!-- Sparkle -->
|
||||
<circle cx="90" cy="15" r="4" fill="#ffd93d" opacity="0.8"/>
|
||||
<circle cx="95" cy="10" r="2" fill="#ffd93d" opacity="0.6"/>
|
||||
<!-- Subtle grid pattern -->
|
||||
<g opacity="0.03">
|
||||
<line x1="0" y1="40" x2="800" y2="40" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="0" y1="80" x2="800" y2="80" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="0" y1="120" x2="800" y2="120" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="0" y1="160" x2="800" y2="160" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="100" y1="0" x2="100" y2="200" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="200" y1="0" x2="200" y2="200" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="300" y1="0" x2="300" y2="200" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="400" y1="0" x2="400" y2="200" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="500" y1="0" x2="500" y2="200" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="600" y1="0" x2="600" y2="200" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="700" y1="0" x2="700" y2="200" stroke="#10b981" stroke-width="1"/>
|
||||
</g>
|
||||
|
||||
<!-- Text -->
|
||||
<g transform="translate(170, 100)">
|
||||
<!-- Main title -->
|
||||
<text x="0" y="0" font-family="Arial, sans-serif" font-size="56" font-weight="bold" fill="url(#textGradient)">
|
||||
Claude How To
|
||||
<!-- Decorative organic blobs in background -->
|
||||
<ellipse cx="720" cy="40" rx="80" ry="60" fill="#10b981" opacity="0.04"/>
|
||||
<ellipse cx="680" cy="160" rx="100" ry="50" fill="#059669" opacity="0.05"/>
|
||||
<ellipse cx="50" cy="180" rx="60" ry="40" fill="#34d399" opacity="0.03"/>
|
||||
|
||||
<!-- Icon container - hexagonal terminal window -->
|
||||
<g transform="translate(35, 40)">
|
||||
<!-- Outer glow ring -->
|
||||
<circle cx="60" cy="60" r="58" fill="none" stroke="url(#emeraldGradient)" stroke-width="2" opacity="0.3"/>
|
||||
|
||||
<!-- Main icon background - rounded square with cut corner -->
|
||||
<path d="M15,8 L95,8 Q105,8 105,18 L105,95 L88,112 L15,112 Q5,112 5,102 L5,18 Q5,8 15,8"
|
||||
fill="#0f2f1a" stroke="url(#emeraldGradient)" stroke-width="2"/>
|
||||
|
||||
<!-- Terminal header bar -->
|
||||
<rect x="10" y="14" width="90" height="20" rx="3" fill="#1a4028" opacity="0.8"/>
|
||||
|
||||
<!-- Terminal buttons -->
|
||||
<circle cx="22" cy="24" r="4" fill="#ef4444" opacity="0.9"/>
|
||||
<circle cx="36" cy="24" r="4" fill="#eab308" opacity="0.9"/>
|
||||
<circle cx="50" cy="24" r="4" fill="#22c55e" opacity="0.9"/>
|
||||
|
||||
<!-- Code lines in terminal -->
|
||||
<g opacity="0.6">
|
||||
<rect x="18" y="44" width="35" height="3" rx="1" fill="#6ee7b7"/>
|
||||
<rect x="58" y="44" width="25" height="3" rx="1" fill="#34d399"/>
|
||||
<rect x="18" y="54" width="20" height="3" rx="1" fill="#10b981"/>
|
||||
<rect x="42" y="54" width="40" height="3" rx="1" fill="#6ee7b7"/>
|
||||
<rect x="18" y="64" width="50" height="3" rx="1" fill="#34d399"/>
|
||||
</g>
|
||||
|
||||
<!-- Prominent command prompt symbol -->
|
||||
<text x="20" y="95" font-family="'SF Mono', 'Fira Code', Consolas, monospace" font-size="32" font-weight="bold" fill="url(#mintGradient)" filter="url(#glow)">$_</text>
|
||||
|
||||
<!-- Cursor blink effect (static representation) -->
|
||||
<rect x="65" y="76" width="12" height="22" rx="2" fill="#6ee7b7" opacity="0.8"/>
|
||||
|
||||
<!-- Corner fold accent -->
|
||||
<path d="M88,112 L105,95 L105,112 Z" fill="#10b981" opacity="0.3"/>
|
||||
</g>
|
||||
|
||||
<!-- Main text -->
|
||||
<g transform="translate(165, 85)">
|
||||
<!-- "Claude-" text -->
|
||||
<text x="0" y="0" font-family="'JetBrains Mono', 'SF Mono', 'Fira Code', monospace" font-size="52" font-weight="700" fill="url(#textGradient)" letter-spacing="-1">
|
||||
Claude-
|
||||
</text>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<text x="2" y="35" font-family="Arial, sans-serif" font-size="20" fill="#a8b2d1" opacity="0.8">
|
||||
Complete Guide to Claude Code Features
|
||||
<!-- "Howto" with accent -->
|
||||
<text x="270" y="0" font-family="'JetBrains Mono', 'SF Mono', 'Fira Code', monospace" font-size="52" font-weight="400" fill="url(#emeraldGradient)" letter-spacing="-1" filter="url(#glow)">
|
||||
Howto
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Decorative elements -->
|
||||
<circle cx="750" cy="50" r="30" fill="#ff6b6b" opacity="0.1"/>
|
||||
<circle cx="730" cy="150" r="20" fill="#4ecdc4" opacity="0.1"/>
|
||||
<circle cx="770" cy="120" r="15" fill="#ffd93d" opacity="0.1"/>
|
||||
<!-- Tagline -->
|
||||
<text x="168" y="135" font-family="'Inter', 'SF Pro', -apple-system, sans-serif" font-size="16" fill="#6ee7b7" opacity="0.85" letter-spacing="0.5">
|
||||
Visual guide to Claude Code — examples you can use today
|
||||
</text>
|
||||
|
||||
<!-- Bottom accent line -->
|
||||
<rect x="40" y="175" width="720" height="3" rx="1.5" fill="url(#textGradient)" opacity="0.5"/>
|
||||
<!-- Decorative code snippets floating -->
|
||||
<g opacity="0.15" font-family="monospace" font-size="11" fill="#34d399">
|
||||
<text x="580" y="35"><agent></text>
|
||||
<text x="620" y="55">skill.invoke()</text>
|
||||
<text x="560" y="170">/commit</text>
|
||||
<text x="680" y="150">CLAUDE.md</text>
|
||||
<text x="700" y="180">hooks[]</text>
|
||||
</g>
|
||||
|
||||
<!-- Accent line at bottom -->
|
||||
<rect x="35" y="175" width="120" height="4" rx="2" fill="url(#emeraldGradient)"/>
|
||||
<rect x="165" y="177" width="80" height="2" rx="1" fill="#6ee7b7" opacity="0.5"/>
|
||||
|
||||
<!-- Floating particles/dots -->
|
||||
<g fill="#10b981">
|
||||
<circle cx="750" cy="30" r="3" opacity="0.4"/>
|
||||
<circle cx="770" cy="50" r="2" opacity="0.3"/>
|
||||
<circle cx="735" cy="45" r="1.5" opacity="0.5"/>
|
||||
<circle cx="760" cy="70" r="2" opacity="0.25"/>
|
||||
<circle cx="780" cy="85" r="1.5" opacity="0.35"/>
|
||||
</g>
|
||||
|
||||
<!-- Version badge -->
|
||||
<g transform="translate(695, 165)">
|
||||
<rect x="0" y="0" width="70" height="22" rx="11" fill="#052e16" stroke="#10b981" stroke-width="1" opacity="0.8"/>
|
||||
<text x="35" y="15" font-family="monospace" font-size="11" fill="#6ee7b7" text-anchor="middle">v1.0+</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 7.1 KiB |
Reference in New Issue
Block a user