Update logo: stylish skateboard deck with location pin on top
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>
This commit is contained in:
shakespeare.diy
parent
32eda7996e
commit
0f34105e66
1 changed files with 113 additions and 24 deletions
|
|
@ -1,36 +1,125 @@
|
|||
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Black background -->
|
||||
<rect width="512" height="512" fill="#000000"/>
|
||||
|
||||
<defs>
|
||||
<linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<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>
|
||||
|
||||
<!-- Gradient circle — exactly as original -->
|
||||
<circle cx="256" cy="256" r="256" fill="url(#iconGradient)"/>
|
||||
<!-- Black background circle -->
|
||||
<circle cx="256" cy="256" r="256" fill="#000000"/>
|
||||
|
||||
<!-- Small skateboard deck sitting flat, centered at the pin tip -->
|
||||
<!-- The pin point lands at y=370. The deck sits horizontally there. -->
|
||||
<!-- Popsicle deck shape: narrow rounded rect, horizontal -->
|
||||
<rect x="196" y="356" width="120" height="36" rx="18" ry="18" fill="#ffffff" opacity="0.95"/>
|
||||
<!-- Nose bump left -->
|
||||
<ellipse cx="200" cy="374" rx="14" ry="18" fill="#ffffff" opacity="0.95"/>
|
||||
<!-- Tail bump right -->
|
||||
<ellipse cx="312" cy="374" rx="14" ry="18" fill="#ffffff" opacity="0.95"/>
|
||||
<!-- 4 small wheels -->
|
||||
<circle cx="210" cy="360" r="9" fill="#000000" opacity="0.5"/>
|
||||
<circle cx="302" cy="360" r="9" fill="#000000" opacity="0.5"/>
|
||||
<circle cx="210" cy="388" r="9" fill="#000000" opacity="0.5"/>
|
||||
<circle cx="302" cy="388" r="9" fill="#000000" opacity="0.5"/>
|
||||
<!-- Subtle gradient outer ring -->
|
||||
<circle cx="256" cy="256" r="246" fill="none" stroke="url(#mainGrad)" stroke-width="1.5" opacity="0.25"/>
|
||||
|
||||
<!-- Map pin — exactly as original -->
|
||||
<g fill="#ffffff">
|
||||
<circle cx="256" cy="210" r="80"/>
|
||||
<path d="M 216 270 L 256 370 L 296 270 Z"/>
|
||||
<circle cx="256" cy="210" r="40" fill="url(#iconGradient)"/>
|
||||
<!-- ===== 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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 5.5 KiB |
Loading…
Reference in a new issue