58e586f09b
- Update all main markdown files (INDEX.md, LEARNING-ROADMAP.md, QUICK_REFERENCE.md, CONTRIBUTING.md, claude_concepts_guide.md, resources.md) with new responsive picture element - Add logo to all subdirectory README files in feature folders (01-10) and plugins - Replace old markdown image syntax with HTML picture element for dark/light mode adaptation - Logo automatically displays dark mode version when system prefers dark mode - Maintain correct relative paths for all nesting levels (../, ../../, etc.) - Update README.md with new logo syntax All markdown files now use the new V2.0 starburst logo design with professional dark/light mode support.
107 lines
4.2 KiB
XML
107 lines
4.2 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">
|
|
<defs>
|
|
<!-- Emerald gradient -->
|
|
<linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#10b981"/>
|
|
<stop offset="100%" style="stop-color:#059669"/>
|
|
</linearGradient>
|
|
|
|
<!-- 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 -->
|
|
<rect width="800" height="200" fill="#ffffff"/>
|
|
|
|
<!-- Icon: Claude-inspired rounded starburst with guide elements -->
|
|
<g transform="translate(70, 100)">
|
|
<!-- Central circle -->
|
|
<circle cx="0" cy="0" r="14" fill="#10b981" filter="url(#glow)"/>
|
|
<circle cx="0" cy="0" r="10" fill="#6ee7b7" opacity="0.9"/>
|
|
|
|
<!-- 12 rounded rays (inspired by Claude's organic design) -->
|
|
<!-- Ray 1 (top, 0°) -->
|
|
<path d="M 0,-15 Q -5,-32 0,-48 Q 5,-32 0,-15" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
|
|
<!-- Ray 2 (30°) -->
|
|
<path d="M 13,-8 Q 18,-22 28,-35 Q 23,-20 13,-8" fill="url(#emeraldGrad)" opacity="0.92"/>
|
|
|
|
<!-- Ray 3 (60°) -->
|
|
<path d="M 22,7 Q 30,15 42,28 Q 28,18 22,7" fill="url(#emeraldGrad)" opacity="0.95"/>
|
|
|
|
<!-- Ray 4 (90°, right) -->
|
|
<path d="M 15,0 Q 32,-5 48,0 Q 32,5 15,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
|
|
|
<!-- Ray 5 (120°) -->
|
|
<path d="M 22,-7 Q 30,-15 42,-28 Q 28,-18 22,-7" fill="url(#emeraldGrad)" opacity="0.92"/>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Text: "Claude" -->
|
|
<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">
|
|
Claude
|
|
</text>
|
|
|
|
<!-- Text: "How-To" -->
|
|
<text x="160" y="138" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="44" font-weight="400" fill="#10b981" letter-spacing="0.5">
|
|
How-To
|
|
</text>
|
|
|
|
<!-- Subtitle -->
|
|
<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">
|
|
VISUAL GUIDE TO CLAUDE CODE
|
|
</text>
|
|
|
|
<!-- Accent line -->
|
|
<line x1="160" y1="153" x2="400" y2="153" stroke="url(#emeraldGrad)" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
|
|
|
|
<!-- Three dots representing progression/examples -->
|
|
<g fill="#10b981" opacity="0.75">
|
|
<circle cx="420" cy="158" r="2.5"/>
|
|
<circle cx="435" cy="158" r="2.5"/>
|
|
<circle cx="450" cy="158" r="2.5"/>
|
|
</g>
|
|
</svg>
|