0f34105e66
New icon design inspired by the skateboarding arch logo style: - Skateboard deck (popsicle shape) in the bottom portion with gradient colors - 4 wheels with gradient accents and white hub centers - Metal truck hangers visible below the deck - Location pin centered on top with glow effect - Brand gradient: #ff0040 (red) → #ff6600 (orange) → #ccff00 (lime) - No text, no fire - clean and stylish on black background Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
125 lines
5.5 KiB
XML
125 lines
5.5 KiB
XML
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#1a0008;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#0d0d00;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="mainGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#ff0040;stop-opacity:1" />
|
|
<stop offset="50%" style="stop-color:#ff6600;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#ccff00;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="deckGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#ff0040;stop-opacity:1" />
|
|
<stop offset="50%" style="stop-color:#ff6600;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#ccff00;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="pinBodyGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#ff0040;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#ff6600;stop-opacity:1" />
|
|
</linearGradient>
|
|
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="pinGlow" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feGaussianBlur stdDeviation="6" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="deckGlow" x="-10%" y="-20%" width="120%" height="140%">
|
|
<feGaussianBlur stdDeviation="5" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Black background circle -->
|
|
<circle cx="256" cy="256" r="256" fill="#000000"/>
|
|
|
|
<!-- Subtle gradient outer ring -->
|
|
<circle cx="256" cy="256" r="246" fill="none" stroke="url(#mainGrad)" stroke-width="1.5" opacity="0.25"/>
|
|
|
|
<!-- ===== SKATEBOARD DECK (bottom half, arch style) ===== -->
|
|
<!--
|
|
Popsicle deck shape: wide rounded rectangle with slightly kicked nose/tail
|
|
Centered in lower portion of icon
|
|
Viewed from the side (profile), horizontal
|
|
-->
|
|
|
|
<!-- Deck shadow / glow layer -->
|
|
<rect x="90" y="352" width="332" height="74" rx="37" ry="37" fill="url(#deckGrad)" opacity="0.35" filter="url(#deckGlow)"/>
|
|
|
|
<!-- Main deck body -->
|
|
<rect x="92" y="354" width="328" height="70" rx="35" ry="35" fill="url(#deckGrad)"/>
|
|
|
|
<!-- Deck concave / graphic detail stripe (center stripe, dark) -->
|
|
<rect x="144" y="368" width="224" height="4" rx="2" fill="#000000" opacity="0.2"/>
|
|
<rect x="144" y="378" width="224" height="4" rx="2" fill="#000000" opacity="0.2"/>
|
|
<rect x="144" y="388" width="224" height="4" rx="2" fill="#000000" opacity="0.2"/>
|
|
<rect x="144" y="398" width="224" height="4" rx="2" fill="#000000" opacity="0.2"/>
|
|
|
|
<!-- Left kicktail curve hint -->
|
|
<ellipse cx="106" cy="389" rx="22" ry="32" fill="url(#deckGrad)" opacity="0.9"/>
|
|
<!-- Right nose curve hint -->
|
|
<ellipse cx="406" cy="389" rx="22" ry="32" fill="url(#deckGrad)" opacity="0.9"/>
|
|
|
|
<!-- ===== TRUCKS ===== -->
|
|
<!-- Left truck hanger (thin bar) -->
|
|
<rect x="138" y="420" width="84" height="9" rx="4.5" fill="#e8e8e8"/>
|
|
<!-- Right truck hanger -->
|
|
<rect x="290" y="420" width="84" height="9" rx="4.5" fill="#e8e8e8"/>
|
|
|
|
<!-- ===== WHEELS (4 total) ===== -->
|
|
<!-- Wheel left-front -->
|
|
<circle cx="160" cy="444" r="22" fill="#111" stroke="#e0e0e0" stroke-width="2.5" filter="url(#glow)"/>
|
|
<circle cx="160" cy="444" r="12" fill="#222" stroke="url(#mainGrad)" stroke-width="2"/>
|
|
<circle cx="160" cy="444" r="4.5" fill="#ffffff"/>
|
|
|
|
<!-- Wheel left-back -->
|
|
<circle cx="216" cy="444" r="22" fill="#111" stroke="#e0e0e0" stroke-width="2.5" filter="url(#glow)"/>
|
|
<circle cx="216" cy="444" r="12" fill="#222" stroke="url(#mainGrad)" stroke-width="2"/>
|
|
<circle cx="216" cy="444" r="4.5" fill="#ffffff"/>
|
|
|
|
<!-- Wheel right-front -->
|
|
<circle cx="296" cy="444" r="22" fill="#111" stroke="#e0e0e0" stroke-width="2.5" filter="url(#glow)"/>
|
|
<circle cx="296" cy="444" r="12" fill="#222" stroke="url(#mainGrad)" stroke-width="2"/>
|
|
<circle cx="296" cy="444" r="4.5" fill="#ffffff"/>
|
|
|
|
<!-- Wheel right-back -->
|
|
<circle cx="352" cy="444" r="22" fill="#111" stroke="#e0e0e0" stroke-width="2.5" filter="url(#glow)"/>
|
|
<circle cx="352" cy="444" r="12" fill="#222" stroke="url(#mainGrad)" stroke-width="2"/>
|
|
<circle cx="352" cy="444" r="4.5" fill="#ffffff"/>
|
|
|
|
<!-- ===== LOCATION PIN (top, centered) ===== -->
|
|
<!--
|
|
Classic location pin:
|
|
- Circle head at top
|
|
- Teardrop tail pointing down toward deck center
|
|
The pin tip lands roughly at y=340, just above the deck
|
|
-->
|
|
|
|
<!-- Pin glow / shadow -->
|
|
<g filter="url(#pinGlow)" opacity="0.6">
|
|
<circle cx="256" cy="190" r="72" fill="#ff0040"/>
|
|
<path d="M 210 242 L 256 340 L 302 242 Z" fill="#ff0040"/>
|
|
</g>
|
|
|
|
<!-- Pin body (filled teardrop) -->
|
|
<circle cx="256" cy="188" r="70" fill="url(#pinBodyGrad)"/>
|
|
<path d="M 212 242 Q 236 295 256 340 Q 276 295 300 242 Z" fill="url(#pinBodyGrad)"/>
|
|
|
|
<!-- Pin inner ring (white) -->
|
|
<circle cx="256" cy="185" r="40" fill="#000000"/>
|
|
<!-- Pin inner center dot (gradient) -->
|
|
<circle cx="256" cy="185" r="22" fill="url(#mainGrad)"/>
|
|
<!-- Pin center highlight -->
|
|
<circle cx="248" cy="177" r="7" fill="#ffffff" opacity="0.35"/>
|
|
</svg>
|