Happy Face

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; }
JAVASCRIPT
Expand for more options Login