Pure CSS 🤢!!!

index.html

<div class="head">
   <div class="left-eye"></div>
   <div class="right-eye"></div>
   <div class="mouth"></div>
   <div class="left-cheek"></div>
   <div class="right-cheek"></div>
</div>

pure-css.markdown

Pure CSS 🤢!!!

License.

script.js

style.css

:root {
  --green: rgba(138, 171, 0, 1);
  --green-fade: rgba(138, 171, 0, 0.5);
  --accent-green:rgba(75, 148, 0,1);
  --dark-green:rgba(18, 30, 0,1);
  --red-fade: rgba(255, 000, 000, 0.3);
}
body{
   background:var(--dark-green)linear-gradient(white 30%, green 70%, var(--dark-green)90%) no-repeat;
}
.head{
   width:250px;
   height:250px;
   background:radial-gradient(circle at 50% 30%, white, var(--green) 50%,var(--dark-green)95%);
   border-radius:50%;
   position:relative;
   margin:200px auto;
   border:2px solid var(--dark-green);
   box-shadow:inset 0 0 20px 10px darkgreen, 0 5px 10px 3px black;
}
.left-eye{
   width:40px;
   height:45px;
   background:var(--accent-green);
   box-shadow:inset 0 0 5px 3px var(--dark-green);
   border-radius:50%;
   position:absolute;
   top:80px;
   left:65px;
}
.right-eye{
   width:40px;
   height:45px;
   background:var(--accent-green);
   box-shadow:inset 0 0 5px 3px var(--dark-green);
   border-radius:50%;
   position:absolute;
   top:80px;
   right:65px;
}
.left-eye::before{
   content:"";
   z-index:3;
   width:80px;
   height:75px;
   position:absolute;
   background:radial-gradient(circle at 0 0, transparent 80%, var(--dark-green)80%, var(--accent-green) 90%, var(--dark-green) 90%);
   border-radius:50%;
   bottom:50px;
   right:15px;
   transform:rotateZ(20deg);
}
.right-eye::before{
   content:"";
   z-index:3;
   width:80px;
   height:75px;
   position:absolute;
   background:radial-gradient(circle at 100% 0, transparent 80%, var(--dark-green)80%, var(--accent-green) 90%, var(--dark-green) 90%);
   border-radius:50%;
   bottom:50px;
   left:15px;
   transform:rotateZ(-20deg);
}

.mouth{
   z-index:3;
   width:100px;
   height:95px;
   position:absolute;
   background:radial-gradient(circle at 50% 100%, transparent 80%, var(--dark-green)80%, var(--accent-green) 90%, var(--dark-green) 90%);
   border-radius:50%;
   top:140px;
   left:74px; 
}
.mouth::before{
   content:"";
   z-index:3;
   width:80px;
   height:55px;
   position:absolute;
   background:radial-gradient(circle at 0 100%, transparent 80%, var(--dark-green)80%, var(--accent-green) 90%, var(--dark-green) 90%);
   border-radius:50%;
   top:0;
   right:80px;  
}
.mouth::after{
   content:"";
   z-index:3;
   width:80px;
   height:55px;
   position:absolute;
   background:radial-gradient(circle at 100% 100%, transparent 80%, var(--dark-green)80%, var(--accent-green) 90%, var(--dark-green) 90%);
   border-radius:50%;
   top:0;
   left:80px;  
}
.left-cheek{
   width:70px;
   height:70px;
   background:radial-gradient(var(--red-fade) 5%, transparent 70%);
   position:absolute;
   bottom:50px;
   left:25px;
   border-radius:50%;
}
.right-cheek{
   width:70px;
   height:70px;
   background:radial-gradient(var(--red-fade) 5%, transparent 70%);
   position:absolute;
   bottom:50px;
   right:25px;
   border-radius:50%;
}