Redesign logo & storefront, light subtle admin theme, and 3D print cost calculator
This commit is contained in:
+47
-84
@@ -1,105 +1,68 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 56" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 52" fill="none">
|
||||
<defs>
|
||||
<!-- Top Slice Gradients -->
|
||||
<linearGradient id="topFace" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#38BDF8" />
|
||||
<stop offset="100%" stop-color="#0284C7" />
|
||||
</linearGradient>
|
||||
<linearGradient id="topRight" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0284C7" />
|
||||
<stop offset="100%" stop-color="#0369A1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="topLeft" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0EA5E9" />
|
||||
<stop offset="100%" stop-color="#0284C7" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Mid Slice Gradients -->
|
||||
<linearGradient id="midFace" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#F43F5E" />
|
||||
<stop offset="100%" stop-color="#E11D48" />
|
||||
</linearGradient>
|
||||
<linearGradient id="midRight" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#E11D48" />
|
||||
<stop offset="100%" stop-color="#BE123C" />
|
||||
</linearGradient>
|
||||
<linearGradient id="midLeft" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<!-- 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="#E11D48" />
|
||||
<stop offset="100%" stop-color="#F43F5E" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Bot Slice Gradients -->
|
||||
<linearGradient id="botFace" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<!-- 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>
|
||||
<linearGradient id="botRight" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#F59E0B" />
|
||||
<stop offset="100%" stop-color="#D97706" />
|
||||
|
||||
<!-- 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>
|
||||
<linearGradient id="botLeft" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FCD34D" />
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Wordmark Gradient -->
|
||||
<linearGradient id="wordmarkGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#F43F5E" />
|
||||
<stop offset="50%" stop-color="#8B5CF6" />
|
||||
<stop offset="100%" stop-color="#06B6D4" />
|
||||
</linearGradient>
|
||||
<linearGradient id="badgeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#6366F1" />
|
||||
<stop offset="100%" stop-color="#4F46E5" />
|
||||
</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>
|
||||
|
||||
<!-- 3D Layered Isometric Cube Mark -->
|
||||
<g transform="translate(6, 4)">
|
||||
<!-- Bottom Layer (Amber) -->
|
||||
<g transform="translate(0, 22)">
|
||||
<!-- Top surface of bottom layer -->
|
||||
<polygon points="22,6 40,16 22,26 4,16" fill="url(#botFace)" opacity="0.9" />
|
||||
<!-- Left side of bottom layer -->
|
||||
<polygon points="4,16 22,26 22,34 4,24" fill="url(#botLeft)" />
|
||||
<!-- Right side of bottom layer -->
|
||||
<polygon points="22,26 40,16 40,24 22,34" fill="url(#botRight)" />
|
||||
</g>
|
||||
<!-- 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)" />
|
||||
|
||||
<!-- Middle Layer (Rose Pink) -->
|
||||
<g transform="translate(0, 11)">
|
||||
<!-- Top surface of middle layer -->
|
||||
<polygon points="22,6 40,16 22,26 4,16" fill="url(#midFace)" opacity="0.95" />
|
||||
<!-- Left side of middle layer -->
|
||||
<polygon points="4,16 22,26 22,34 4,24" fill="url(#midLeft)" />
|
||||
<!-- Right side of middle layer -->
|
||||
<polygon points="22,26 40,16 40,24 22,34" fill="url(#midRight)" />
|
||||
</g>
|
||||
|
||||
<!-- Top Layer (Cyan / Sky) -->
|
||||
<g transform="translate(0, 0)">
|
||||
<!-- Top surface of top layer -->
|
||||
<polygon points="22,6 40,16 22,26 4,16" fill="url(#topFace)" />
|
||||
<!-- Left side of top layer -->
|
||||
<polygon points="4,16 22,26 22,34 4,24" fill="url(#topLeft)" />
|
||||
<!-- Right side of top layer -->
|
||||
<polygon points="22,26 40,16 40,24 22,34" fill="url(#topRight)" />
|
||||
<!-- Accent Sparkle/Nozzle Dot on Top Face -->
|
||||
<circle cx="22" cy="16" r="3" fill="#FFFFFF" opacity="0.9" />
|
||||
</g>
|
||||
<!-- 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" />
|
||||
</g>
|
||||
|
||||
<!-- Wordmark Text -->
|
||||
<g transform="translate(62, 38)">
|
||||
<!-- "Jouw" in Bold Slate -->
|
||||
<text x="0" y="0" font-family="'Fredoka', system-ui, sans-serif" font-weight="700" font-size="28" fill="#0F172A" letter-spacing="-0.5">Jouw</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>
|
||||
|
||||
<!-- "driedee" in Vibrant Gradient -->
|
||||
<text x="74" y="0" font-family="'Fredoka', system-ui, sans-serif" font-weight="700" font-size="28" fill="url(#wordmarkGrad)" letter-spacing="-0.5">driedee</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>
|
||||
|
||||
<!-- ".nl" Badge -->
|
||||
<rect x="168" y="-21" width="28" height="16" rx="5" fill="url(#badgeGrad)" />
|
||||
<text x="173" y="-9" font-family="'Nunito', system-ui, sans-serif" font-weight="800" font-size="10" fill="#FFFFFF" letter-spacing="0.5">.NL</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>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 3.0 KiB |
Reference in New Issue
Block a user