HTML
<svg width="500px" height="500px" viewBox="0 0 100 100">
<ellipse class="shadow" cx="65" cy="92.5" rx="25" ry="5" />
<g class="body-group">
<circle class="body-shader" cx="50" cy="50" r="45" />
<circle class="body-shadow" cx="50" cy="50" r="45" />
<circle class="body-main" cx="50" cy="50" r="45" clip-path="url(#body_shadow)" />
<g class="eye-group">
<!-- <ellipse class="eye cyclops" cx="50" cy="25" rx="6" ry="8" /> -->
<ellipse class="eye normal left" cx="40" cy="25" rx="4" ry="6" />
<ellipse class="eye normal right" cx="60" cy="25" rx="4" ry="6" />
</g>
<g class="mouth-nervous-group">
<path d="m20 50 c0 -20 60 -20 60 0c0 20 -1 20 -30 20 c -30 0 -30 0 -30 -20z" />
<rect fill="white" x="31" y="35" width="8" height="10" clip-path="url(#mouth_nervous)" />
<rect fill="white" x="41" y="35" width="8" height="10" clip-path="url(#mouth_nervous)" />
<rect fill="white" x="51" y="35" width="8" height="10" clip-path="url(#mouth_nervous)" />
<rect fill="white" x="61" y="35" width="8" height="10" clip-path="url(#mouth_nervous)" />
<rect fill="white" x="31" y="55" width="8" height="20" clip-path="url(#mouth_nervous)" />
<rect fill="white" x="41" y="55" width="8" height="20" clip-path="url(#mouth_nervous)" />
<rect fill="white" x="51" y="55" width="8" height="20" clip-path="url(#mouth_nervous)" />
<rect fill="white" x="61" y="55" width="8" height="20" clip-path="url(#mouth_nervous)" />
</g>
</g>
<g class="mouth-happy-grouip">
<path d="m30,45 c 0,-10 40,-10 40,1 c 0,10 0,30 -20,30c-20,0 -20,-19 -20,-30z" />
</g>
<defs>
<clipPath id="body_shadow">
<circle cx="40" cy="40" r="45" />
</clipPath>
<clipPath id="mouth_nervous">
<path d="m20 50 c0 -20 60 -20 60 0c0 20 -1 20 -30 20 c -30 0 -30 0 -30 -20z" />
</clipPath>
</defs>
</svg>
SCSS
$beige : #fff0c2;
* { animation: none !important; }
body {
display: flex;
font-size: 90vmin;
height: 100vh;
background: gainsboro;
justify-content: center;
align-items: center;
background: shade($beige, 15%);
}
svg {
width: 1em;
height: 1em;
background: $beige;
box-shadow: 0 10px 30px rgba(black, .1);
border-radius: 4px;
}
.shadow {
fill: rgba(black, .15);
}
.body-group {
animation: wobble 5s ease-in-out infinite;
transform-origin: center bottom;
@keyframes wobble {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}
}
$color : tomato;
.body-shader { fill: shade($beige, 80%); }
.body-main { fill: $color; }
.body-shadow { fill: $color; opacity: .9; }
.mouth-nervous-group { display: none; }
