valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: update logo to crossed wrench and brush

Browse Source 
Logo Redesign:
- Simple, beautiful crossed design (wrench × brush in X formation)
- Wrench: Bottom-left to top-right with purple gradient
- Brush: Top-left to bottom-right with orange-red gradient
- Center circle at intersection with purple-to-cyan gradient
- Clean, minimal aesthetic with smooth animations

Favicon Update:
- Matching crossed design scaled for 64x64
- Clear visibility at small sizes
- Professional and memorable icon

Visual Elements:
- Wrench: Indigo (#667eea) to Purple (#a855f7) gradient
- Brush handle: Amber (#f59e0b) to Red (#ef4444) gradient
- Brush ferrule: Gray metal finish
- Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient
- Center: Purple to Cyan radial gradient

Animations:
- Initial rotation animation on logo
- Progressive drawing of wrench and brush
- Bristles expand effect
- Center circle pops in with spring animation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-09 15:49:32 +01:00
parent 41c77dce9d
commit 2d421c9cac
2 changed files with 114 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/icon.svg
View File

@@ -2,20 +2,30 @@
<!-- Background -->
<rect width="64" height="64" rx="12" fill="url(#bg)"/>
<!-- Suitcase body -->
<rect x="16" y="27" width="32" height="22" rx="2" stroke="url(#suitcase)" stroke-width="2" fill="rgba(139, 92, 246, 0.2)"/>
<!-- Suitcase handle -->
<path d="M 27 27 Q 32 19, 37 27" stroke="url(#suitcase)" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- Suitcase latch -->
<rect x="30" y="26" width="4" height="3" rx="1" fill="url(#suitcase)"/>
<!-- Wrench (bottom-left to top-right) -->
<g>
<!-- Wrench handle -->
<line x1="19" y1="45" x2="37" y2="27" stroke="url(#wrenchGrad)" stroke-width="3" stroke-linecap="round"/>
<!-- Wrench head -->
<path d="M 37 27 L 40 24 M 37 27 L 40 30" stroke="url(#wrenchGrad)" stroke-width="3" stroke-linecap="round"/>
</g>
<!-- Brush (top-left to bottom-right) -->
<g>
<!-- Brush handle -->
<rect x="31" y="32" width="2" height="11" fill="url(#brushHandle)" rx="1"/>
<line x1="24" y1="19" x2="37" y2="32" stroke="url(#brushGrad)" stroke-width="2.5" stroke-linecap="round"/>
<!-- Brush ferrule -->
<ellipse cx="38.5" cy="33.5" rx="2.5" ry="4" fill="url(#ferrule)" transform="rotate(45 38.5 33.5)"/>
<!-- Brush bristles -->
<path d="M 28 43 L 29 47 L 30 46 L 31 48 L 32 46 L 33 48 L 34 46 L 35 47 L 36 43 Z" fill="url(#brushBristles)"/>
<line x1="39.5" y1="34.5" x2="43" y2="38" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
<line x1="40.5" y1="35.5" x2="45" y2="40" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
<line x1="41.5" y1="36.5" x2="46" y2="41" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
<line x1="38.5" y1="35.5" x2="41" y2="38" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
<line x1="37.5" y1="36.5" x2="39.5" y2="38.5" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
</g>
<!-- Center circle -->
<circle cx="32" cy="32" r="4" fill="url(#center)"/>
<!-- Gradients -->
<defs>
@@ -23,17 +33,25 @@
<stop offset="0%" stop-color="#1a1a2e"/>
<stop offset="100%" stop-color="#0f0f1a"/>
</linearGradient>
<linearGradient id="suitcase" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#6366f1"/>
<linearGradient id="wrenchGrad" x1="19" y1="45" x2="40" y2="24">
<stop offset="0%" stop-color="#667eea"/>
<stop offset="100%" stop-color="#a855f7"/>
</linearGradient>
<linearGradient id="brushHandle" x1="0%" y1="0%" x2="0%" y2="100%">
<linearGradient id="brushGrad" x1="24" y1="19" x2="37" y2="32">
<stop offset="0%" stop-color="#f59e0b"/>
<stop offset="100%" stop-color="#ef4444"/>
</linearGradient>
<linearGradient id="brushBristles" x1="0%" y1="0%" x2="0%" y2="100%">
<linearGradient id="ferrule" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#94a3b8"/>
<stop offset="100%" stop-color="#64748b"/>
</linearGradient>
<linearGradient id="bristles" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#10b981"/>
<stop offset="100%" stop-color="#06b6d4"/>
</linearGradient>
<linearGradient id="center" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#06b6d4"/>
</linearGradient>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

140
components/Logo.tsx
View File

@@ -11,93 +11,107 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
initial={{ opacity: 0, rotate: -45 }}
animate={{ opacity: 1, rotate: 0 }}
transition={{ duration: 0.8, ease: 'easeOut' }}
>
{/* Suitcase body */}
<motion.rect
x="50"
y="85"
width="100"
height="70"
rx="6"
stroke="url(#gradient1)"
strokeWidth="5"
fill="rgba(139, 92, 246, 0.15)"
{/* Wrench (bottom-left to top-right) */}
<motion.g
initial={{ pathLength: 0, opacity: 0 }}
animate={{ pathLength: 1, opacity: 1 }}
transition={{ duration: 1.2, ease: 'easeInOut' }}
/>
{/* Suitcase handle */}
<motion.path
d="M 85 85 Q 100 60, 115 85"
stroke="url(#gradient1)"
strokeWidth="5"
fill="none"
>
{/* Wrench handle */}
<motion.line
x1="60"
y1="140"
x2="115"
y2="85"
stroke="url(#wrenchGradient)"
strokeWidth="8"
strokeLinecap="round"
/>
{/* Wrench head (open end) */}
<motion.path
d="M 115 85 L 125 75 M 115 85 L 125 95"
stroke="url(#wrenchGradient)"
strokeWidth="8"
strokeLinecap="round"
/>
</motion.g>
{/* Brush (top-left to bottom-right) */}
<motion.g
initial={{ pathLength: 0, opacity: 0 }}
animate={{ pathLength: 1, opacity: 1 }}
transition={{ duration: 1, delay: 0.2, ease: 'easeInOut' }}
/>
{/* Suitcase latch */}
<motion.rect
x="95"
y="82"
width="10"
height="8"
rx="2"
fill="url(#gradient1)"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.8 }}
/>
{/* Brush handle */}
<motion.g
initial={{ opacity: 0, y: -15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1, ease: 'easeOut' }}
transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
>
<rect
x="97"
y="100"
width="6"
height="35"
fill="url(#brushHandle)"
rx="3"
{/* Brush handle */}
<motion.line
x1="75"
y1="60"
x2="115"
y2="100"
stroke="url(#brushHandleGradient)"
strokeWidth="6"
strokeLinecap="round"
/>
{/* Brush ferrule (metal part) */}
<motion.ellipse
cx="120"
cy="105"
rx="6"
ry="10"
fill="url(#ferruleGradient)"
transform="rotate(45 120 105)"
/>
</motion.g>
{/* Brush bristles */}
<motion.g
initial={{ opacity: 0, scaleY: 0.5 }}
animate={{ opacity: 1, scaleY: 1 }}
transition={{ duration: 0.6, delay: 1.3, ease: 'easeOut' }}
style={{ transformOrigin: '100px 135px' }}
initial={{ scaleY: 0.5, opacity: 0 }}
animate={{ scaleY: 1, opacity: 1 }}
transition={{ duration: 0.6, delay: 0.8, ease: 'easeOut' }}
>
<path
d="M 88 135 L 90 145 L 92 143 L 94 146 L 96 144 L 98 147 L 100 145 L 102 147 L 104 144 L 106 146 L 108 143 L 110 145 L 112 135 Z"
fill="url(#brushBristles)"
/>
<motion.line x1="123" y1="108" x2="135" y2="120" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
<motion.line x1="126" y1="111" x2="140" y2="125" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
<motion.line x1="129" y1="114" x2="143" y2="128" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
<motion.line x1="120" y1="111" x2="130" y2="121" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
<motion.line x1="117" y1="114" x2="125" y2="122" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
</motion.g>
</motion.g>
{/* Center circle (intersection) */}
<motion.circle
cx="100"
cy="100"
r="12"
fill="url(#centerGradient)"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.5, delay: 1, type: 'spring', stiffness: 200 }}
/>
{/* Gradient definitions */}
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#a855f7" />
<stop offset="100%" stopColor="#6366f1" />
<linearGradient id="wrenchGradient" x1="60" y1="140" x2="125" y2="75">
<stop offset="0%" stopColor="#667eea" />
<stop offset="100%" stopColor="#a855f7" />
</linearGradient>
<linearGradient id="brushHandle" x1="0%" y1="0%" x2="0%" y2="100%">
<linearGradient id="brushHandleGradient" x1="75" y1="60" x2="115" y2="100">
<stop offset="0%" stopColor="#f59e0b" />
<stop offset="100%" stopColor="#ef4444" />
</linearGradient>
<linearGradient id="brushBristles" x1="0%" y1="0%" x2="0%" y2="100%">
<linearGradient id="ferruleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#94a3b8" />
<stop offset="100%" stopColor="#64748b" />
</linearGradient>
<linearGradient id="bristlesGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#10b981" />
<stop offset="100%" stopColor="#06b6d4" />
</linearGradient>
<linearGradient id="centerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#a855f7" />
<stop offset="100%" stopColor="#06b6d4" />
</linearGradient>
</defs>
</motion.svg>
);