69 lines
3.4 KiB
XML
69 lines
3.4 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
|
|
<defs>
|
|
<!-- Custard cream gradient -->
|
|
<linearGradient id="custardGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#FFF5E1"/>
|
|
<stop offset="50%" style="stop-color:#FFE4B5"/>
|
|
<stop offset="100%" style="stop-color:#F5C97A"/>
|
|
</linearGradient>
|
|
<!-- Caramel top gradient -->
|
|
<linearGradient id="caramelGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#D4A056"/>
|
|
<stop offset="100%" style="stop-color:#B8860B"/>
|
|
</linearGradient>
|
|
<!-- Bowl/Cup gradient -->
|
|
<linearGradient id="bowlGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#8B7355"/>
|
|
<stop offset="50%" style="stop-color:#6B4423"/>
|
|
<stop offset="100%" style="stop-color:#4A2C17"/>
|
|
</linearGradient>
|
|
<!-- Shine effect -->
|
|
<linearGradient id="shineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
|
|
<stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:0"/>
|
|
</linearGradient>
|
|
<!-- Drop shadow -->
|
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#000000" flood-opacity="0.2"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Ramekin/Bowl base -->
|
|
<ellipse cx="60" cy="95" rx="40" ry="8" fill="#3D2314" opacity="0.3"/>
|
|
|
|
<!-- Bowl body -->
|
|
<path d="M20 55 L25 90 Q60 100 95 90 L100 55 Q100 50 95 48 L25 48 Q20 50 20 55" fill="url(#bowlGradient)" filter="url(#shadow)"/>
|
|
|
|
<!-- Bowl rim -->
|
|
<ellipse cx="60" cy="48" rx="38" ry="8" fill="#8B7355"/>
|
|
<ellipse cx="60" cy="48" rx="35" ry="6" fill="#6B4423"/>
|
|
|
|
<!-- Custard cream -->
|
|
<ellipse cx="60" cy="46" rx="32" ry="5" fill="url(#custardGradient)"/>
|
|
|
|
<!-- Caramel top layer -->
|
|
<ellipse cx="60" cy="44" rx="28" ry="4" fill="url(#caramelGradient)"/>
|
|
|
|
<!-- Caramelized sugar drizzle -->
|
|
<path d="M40 43 Q50 41 60 43 Q70 45 80 43" stroke="#8B4513" stroke-width="1.5" fill="none" stroke-linecap="round"/>
|
|
|
|
<!-- Shine on custard -->
|
|
<ellipse cx="48" cy="42" rx="8" ry="2" fill="url(#shineGradient)"/>
|
|
|
|
<!-- Steam wisps -->
|
|
<path d="M45 35 Q43 28 47 22" stroke="#D4A056" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.5">
|
|
<animate attributeName="d" dur="2s" repeatCount="indefinite" values="M45 35 Q43 28 47 22;M45 35 Q47 28 43 22;M45 35 Q43 28 47 22"/>
|
|
<animate attributeName="opacity" dur="2s" repeatCount="indefinite" values="0.5;0.3;0.5"/>
|
|
</path>
|
|
<path d="M60 33 Q58 26 62 20" stroke="#D4A056" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.6">
|
|
<animate attributeName="d" dur="2.5s" repeatCount="indefinite" values="M60 33 Q58 26 62 20;M60 33 Q62 26 58 20;M60 33 Q58 26 62 20"/>
|
|
<animate attributeName="opacity" dur="2.5s" repeatCount="indefinite" values="0.6;0.3;0.6"/>
|
|
</path>
|
|
<path d="M75 35 Q73 28 77 22" stroke="#D4A056" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.4">
|
|
<animate attributeName="d" dur="3s" repeatCount="indefinite" values="M75 35 Q73 28 77 22;M75 35 Q77 28 73 22;M75 35 Q73 28 77 22"/>
|
|
<animate attributeName="opacity" dur="3s" repeatCount="indefinite" values="0.4;0.2;0.4"/>
|
|
</path>
|
|
|
|
<!-- "C" letter integrated into design (subtle) -->
|
|
<text x="60" y="75" font-family="Georgia, serif" font-size="20" font-weight="bold" fill="#FFF5E1" text-anchor="middle" opacity="0.9">C</text>
|
|
</svg> |