45 lines
1.8 KiB
XML
45 lines
1.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
|
|
<g transform="scale(2.5)">
|
|
<style>
|
|
:root {
|
|
--face-primary: #FFCC00;
|
|
--face-highlight: #FFE566;
|
|
--face-shadow: #CC9900;
|
|
}
|
|
.face-primary { stop-color: var(--face-primary); }
|
|
.face-highlight { stop-color: var(--face-highlight); }
|
|
.face-shadow { stop-color: var(--face-shadow); }
|
|
.face-stroke { stroke: var(--face-shadow); }
|
|
.bevel-fill { fill: var(--face-primary); }
|
|
</style>
|
|
|
|
<defs>
|
|
<!-- Radial gradient for 3D sphere effect -->
|
|
<radialGradient id="faceGradient" cx="35%" cy="35%" r="65%">
|
|
<stop offset="0%" stop-color="#FFFFFF"/>
|
|
<stop offset="50%" class="face-highlight"/>
|
|
<stop offset="100%" class="face-primary"/>
|
|
</radialGradient>
|
|
|
|
<!-- Darker gradient for bottom edge (bevel effect) -->
|
|
<radialGradient id="shadowGradient" cx="50%" cy="0%" r="100%">
|
|
<stop offset="60%" class="face-primary"/>
|
|
<stop offset="100%" class="face-shadow"/>
|
|
</radialGradient>
|
|
|
|
<!-- Drop shadow filter -->
|
|
<filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="1" dy="2" stdDeviation="2" flood-color="#000000" flood-opacity="0.3"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Main face with gradient and shadow -->
|
|
<circle cx="24" cy="24" r="20" fill="url(#faceGradient)" class="face-stroke" stroke-width="1.5" filter="url(#dropShadow)"/>
|
|
|
|
<!-- Subtle bottom bevel overlay -->
|
|
<ellipse cx="24" cy="32" rx="18" ry="12" fill="url(#shadowGradient)" opacity="0.3"/>
|
|
|
|
<!-- Specular highlight (top-left light reflection) -->
|
|
<ellipse cx="16" cy="14" rx="6" ry="4" fill="#FFFFFF" opacity="0.6"/>
|
|
</g>
|
|
</svg>
|