d17564a9f2
Created a professional SVG logo for the project featuring: - Modern gradient design with code brackets symbol - Book/guide icon representing learning and documentation - "Claude How To" branding with subtitle - Decorative elements and professional color scheme Added logo to all major documentation files: - README.md - INDEX.md - QUICK_REFERENCE.md - claude_concepts_guide.md The logo provides consistent branding across the project and improves visual appeal on GitHub and other markdown viewers. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
2.9 KiB
XML
73 lines
2.9 KiB
XML
<?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" />
|
|
</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" />
|
|
</linearGradient>
|
|
|
|
<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" />
|
|
</linearGradient>
|
|
|
|
<filter id="glow">
|
|
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="800" height="200" rx="20" 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"/>
|
|
</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
|
|
</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
|
|
</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"/>
|
|
|
|
<!-- Bottom accent line -->
|
|
<rect x="40" y="175" width="720" height="3" rx="1.5" fill="url(#textGradient)" opacity="0.5"/>
|
|
</svg>
|