Complete redesign: modern, fresh, subtle Scandinavian tech studio look & feel for webshop and admin
This commit is contained in:
+22
-32
@@ -1,41 +1,31 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
|
||||
<defs>
|
||||
<!-- Soft Warm Coral Gradient -->
|
||||
<linearGradient id="iconCoral" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FB7185" />
|
||||
<stop offset="100%" stop-color="#F43F5E" />
|
||||
<linearGradient id="icoTop" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#38bdf8" />
|
||||
<stop offset="100%" stop-color="#0284c7" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Warm Amber Gradient -->
|
||||
<linearGradient id="iconAmber" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FBBF24" />
|
||||
<stop offset="100%" stop-color="#F59E0B" />
|
||||
<linearGradient id="icoLeft" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#6366f1" />
|
||||
<stop offset="100%" stop-color="#4338ca" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Gentle Sky Gradient -->
|
||||
<linearGradient id="iconSky" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#38BDF8" />
|
||||
<stop offset="100%" stop-color="#0284C7" />
|
||||
<linearGradient id="icoRight" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0ea5e9" />
|
||||
<stop offset="100%" stop-color="#0369a1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Friendly Rounded Layered 3D Emblem -->
|
||||
<g transform="translate(4, 4)">
|
||||
<!-- Base Layer (Amber) -->
|
||||
<rect x="2" y="26" width="36" height="12" rx="6" fill="url(#iconAmber)" />
|
||||
|
||||
<!-- Middle Layer (Coral) -->
|
||||
<rect x="2" y="14" width="36" height="12" rx="6" fill="url(#iconCoral)" />
|
||||
|
||||
<!-- Top Layer (Sky) -->
|
||||
<rect x="2" y="2" width="36" height="12" rx="6" fill="url(#iconSky)" />
|
||||
|
||||
<!-- Cute extrusion highlights -->
|
||||
<circle cx="10" cy="8" r="2.5" fill="#FFFFFF" opacity="0.85" />
|
||||
<circle cx="10" cy="20" r="2.5" fill="#FFFFFF" opacity="0.85" />
|
||||
<circle cx="10" cy="32" r="2.5" fill="#FFFFFF" opacity="0.85" />
|
||||
|
||||
<!-- Cute Sparkle -->
|
||||
<path d="M33 4L34 7L37 8L34 9L33 12L32 9L29 8L32 7Z" fill="#FFFFFF" opacity="0.95" />
|
||||
<!-- Background rounded squircle with subtle border -->
|
||||
<rect x="2" y="2" width="44" height="44" rx="12" fill="#0f172a" />
|
||||
|
||||
<!-- Modern Geometric 3D Prism Mark -->
|
||||
<g transform="translate(6, 6)">
|
||||
<!-- Top Face -->
|
||||
<path d="M18 6 L31 13.5 L18 21 L5 13.5 Z" fill="url(#icoTop)" />
|
||||
<!-- Left Face -->
|
||||
<path d="M5 15.5 L17 22.5 L17 34 L5 27 Z" fill="url(#icoLeft)" />
|
||||
<!-- Right Face -->
|
||||
<path d="M19 22.5 L31 15.5 L31 27 L19 34 Z" fill="url(#icoRight)" />
|
||||
<!-- Precision Core Light Accent -->
|
||||
<circle cx="18" cy="21" r="2" fill="#ffffff" opacity="0.95" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.2 KiB |
+35
-57
@@ -1,68 +1,46 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 52" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 48" fill="none" class="w-auto h-full">
|
||||
<defs>
|
||||
<!-- Soft Warm Coral Gradient -->
|
||||
<linearGradient id="softCoral" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FB7185" />
|
||||
<stop offset="100%" stop-color="#F43F5E" />
|
||||
<!-- Modern high-end gradients -->
|
||||
<linearGradient id="facetTop" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#38bdf8" />
|
||||
<stop offset="100%" stop-color="#0284c7" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Warm Amber / Mango Gradient -->
|
||||
<linearGradient id="softAmber" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FBBF24" />
|
||||
<stop offset="100%" stop-color="#F59E0B" />
|
||||
<linearGradient id="facetLeft" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#6366f1" />
|
||||
<stop offset="100%" stop-color="#4338ca" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Gentle Sky / Mint Gradient -->
|
||||
<linearGradient id="softSky" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#38BDF8" />
|
||||
<stop offset="100%" stop-color="#0284C7" />
|
||||
<linearGradient id="facetRight" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0ea5e9" />
|
||||
<stop offset="100%" stop-color="#0369a1" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Playful Text Gradient -->
|
||||
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#F43F5E" />
|
||||
<stop offset="60%" stop-color="#EA580C" />
|
||||
<stop offset="100%" stop-color="#F59E0B" />
|
||||
<linearGradient id="accentDot" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#38bdf8" />
|
||||
<stop offset="100%" stop-color="#6366f1" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Soft Glow Filter -->
|
||||
<filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#F43F5E" flood-opacity="0.18" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Friendly Rounded 3D Printing Emblem (Cubic Spool / Layered Soft Prism) -->
|
||||
<g transform="translate(6, 6)" filter="url(#softGlow)">
|
||||
<!-- Base Layer (Soft Amber Pill) -->
|
||||
<rect x="2" y="24" width="36" height="12" rx="6" fill="url(#softAmber)" />
|
||||
|
||||
<!-- Middle Layer (Soft Coral Pill) -->
|
||||
<rect x="2" y="13" width="36" height="12" rx="6" fill="url(#softCoral)" />
|
||||
|
||||
<!-- Top Layer (Soft Sky Pill) -->
|
||||
<rect x="2" y="2" width="36" height="12" rx="6" fill="url(#softSky)" />
|
||||
|
||||
<!-- Cute 3D Extrusion Dot / Sparkle Highlight -->
|
||||
<circle cx="10" cy="8" r="2.5" fill="#FFFFFF" opacity="0.85" />
|
||||
<circle cx="10" cy="19" r="2.5" fill="#FFFFFF" opacity="0.85" />
|
||||
<circle cx="10" cy="30" r="2.5" fill="#FFFFFF" opacity="0.85" />
|
||||
|
||||
<!-- Delicate cute star / nozzle sparkle -->
|
||||
<path d="M33 4L34 7L37 8L34 9L33 12L32 9L29 8L32 7Z" fill="#FFFFFF" opacity="0.9" />
|
||||
<!-- Modern Geometric 3D Prism Mark -->
|
||||
<g transform="translate(6, 6)">
|
||||
<!-- Top Face (Soft Isometric Diamond) -->
|
||||
<path d="M18 4 L30 11 L18 18 L6 11 Z" fill="url(#facetTop)" />
|
||||
<!-- Left Face (Dimension with 3D print layer notch) -->
|
||||
<path d="M6 13 L17 19.5 L17 31 L6 24.5 Z" fill="url(#facetLeft)" />
|
||||
<!-- Right Face -->
|
||||
<path d="M19 19.5 L30 13 L30 24.5 L19 31 Z" fill="url(#facetRight)" />
|
||||
<!-- Precision Core Light Accent -->
|
||||
<circle cx="18" cy="18" r="1.75" fill="#ffffff" opacity="0.95" />
|
||||
</g>
|
||||
|
||||
<!-- Wordmark Text -->
|
||||
<g transform="translate(56, 36)">
|
||||
<!-- "jouw" in Friendly Rounded Slate -->
|
||||
<text x="0" y="0" font-family="'Fredoka', 'Nunito', system-ui, sans-serif" font-weight="600" font-size="27" fill="#1E293B" letter-spacing="-0.3">jouw</text>
|
||||
|
||||
<!-- "3D" / "driedee" in Vibrant Soft Gradient -->
|
||||
<text x="64" y="0" font-family="'Fredoka', 'Nunito', system-ui, sans-serif" font-weight="700" font-size="27" fill="url(#textGradient)" letter-spacing="-0.3">driedee</text>
|
||||
|
||||
<!-- Subtle Friendly ".nl" Badge -->
|
||||
<g transform="translate(148, -20)">
|
||||
<rect x="0" y="0" width="26" height="17" rx="8.5" fill="#F1F5F9" />
|
||||
<text x="13" y="12" font-family="'Fredoka', 'Nunito', system-ui, sans-serif" font-weight="700" font-size="10.5" fill="#64748B" text-anchor="middle">.nl</text>
|
||||
</g>
|
||||
<!-- Modern Clean Typography -->
|
||||
<g transform="translate(50, 31)">
|
||||
<!-- 'jouw' in clean, light-medium neutral font -->
|
||||
<text font-family="'Plus Jakarta Sans', system-ui, -apple-system, sans-serif" font-size="22" font-weight="500" fill="#0f172a" letter-spacing="-0.5">jouw</text>
|
||||
<!-- 'driedee' in confident bold -->
|
||||
<text x="56" font-family="'Plus Jakarta Sans', system-ui, -apple-system, sans-serif" font-size="22" font-weight="700" fill="#0f172a" letter-spacing="-0.5">driedee</text>
|
||||
<!-- Vibrant Modern Dot -->
|
||||
<circle cx="137.5" cy="-5.5" r="3" fill="url(#accentDot)" />
|
||||
<!-- '.nl' micro pill badge -->
|
||||
<rect x="145" y="-17" width="24" height="15" rx="4" fill="#f1f5f9" />
|
||||
<text x="149" y="-6" font-family="'Plus Jakarta Sans', system-ui, -apple-system, sans-serif" font-size="10" font-weight="700" fill="#475569" letter-spacing="0.2">nl</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 2.3 KiB |
Reference in New Issue
Block a user