<div class="wrapper">
  <div class="head">
    <div class="eye-r"></div>
    <div class="eye-l"></div>
    <div class="nose"></div>
    <div class="beard"></div>
    <div class="beard2"></div>
    <div class="mouth">
      <p><span></span></p>
    </div>
    <div class="mouth2"></div>
    <div class="mouth-r"></div>
    <div class="mouth-l"></div>
  </div>
</div>

*{margin:0;padding:0;box-sizing:border-box;}
body{background:#efefef;}
.wrapper{margin:10px auto;width:500px;height:380px;position:relative;background:#fff;border:1px solid #eee;box-shadow:0 0 12px #fff;}
.head{width:320px;height:260px;position:absolute;top:50px;left:88px;overflow:hidden;}
.head::before{content:"";width:316px;height:300px;position:absolute;top:0;left:0;background:#02a6ff;border:2px solid #333;border-radius:50%;overflow:hidden;}
.head::after{content:"";width:280px;height:240px;position:absolute;top:50px;left:18px;background:#fff;border:2px solid #333;border-radius:50%;}
.eye-r{width:75px;height:92px;position:absolute;top:19px;right:86px;background:#fff;border:2px solid #333;border-radius:50%;z-index:1;}
.eye-r::before{content:"";width:25px;height:30px;position:absolute;top:38px;left:4px;background:#000;border-radius:50%;}
.eye-r::after{content:"";width:10px;height:15px;position:absolute;top:49px;left:7px;background:#fff;border-radius:50%;}
.eye-l{width:75px;height:92px;position:absolute;top:19px;left:86px;background:#fff;border:2px solid #333;border-radius:50%;z-index:1;}
.eye-l::before{content:"";width:25px;height:30px;position:absolute;top:38px;right:4px;background:#000;border-radius:50%;}
.eye-l::after{content:"";width:10px;height:15px;position:absolute;top:49px;right:7px;background:#fff;border-radius:50%;}
.nose{width:46px;height:44px;position:absolute;top:95px;left:137px;background:#d01319;border:2px solid #333;border-radius:50%;z-index:1;}
.nose::before{content:"";width:16px;height:16px;position:absolute;top:5px;left:6px;background:#fff;border-radius:50%;z-index:1;}
.nose::after{content:"";width:2px;height:50px;position:absolute;top:100%;left:20px;background:#000;}
.mouth{width:260px;height:75px;position:absolute;top:180px;left:30px;overflow:hidden;z-index:1;}
.mouth p{width:360px;height:360px;position:absolute;left:-50px;bottom:36px;background:#8e080f;border:2px solid #333;border-radius:26%;z-index:1;transform:rotate(45deg);overflow:hidden;}
.mouth p span{width:100px;height:50px;position:absolute;bottom:11px;right:-18px;background:#d01119;border:2px solid #333;border-radius:50%;transform:rotate(-45deg);}
.mouth2{width:260px;height:14px;position:absolute;top:180px;left:30px;overflow:hidden;z-index:1;background:#fff;}
.mouth2::before{content:"";width:720px;height:720px;position:absolute;left:-232px;top:0;background:#8e080f;border:2px solid #333;border-radius:50%;z-index:1;transform:rotate(45deg);}
.mouth-r{width:20px;height:20px;position:absolute;top:177px;right:50px;border:solid #333;border-width:3px 3px 0;border-radius:50% 50% 0;z-index:1;transform:rotate(107deg);}
.mouth-r::after{content:"";width:10px;height:5px;position:absolute;top:13px;left:-2px;background:#fff;}
.mouth-l{width:20px;height:20px;position:absolute;top:177px;left:49px;border:solid #333;border-width:0 3px 3px;border-radius:0 50% 50%;z-index:1;transform:rotate(-106deg) rotateX(180deg);}
.mouth-l::after{content:"";width:10px;height:5px;position:absolute;top:0;right:-2px;background:#fff;}
.beard{width:110px;height:2px;position:absolute;top:128px;left:23px;background:#000;transform:rotate(11deg);z-index:1;}
.beard::before{content:"";width:110px;height:2px;position:absolute;top:20px;left:0px;background:#000;transform:rotate(-9deg);z-index:1;}
.beard::after{content:"";width:110px;height:2px;position:absolute;top:40px;left:7px;background:#000;transform:rotate(-20deg);z-index:1;}
.beard2{width:110px;height:2px;position:absolute;top:128px;right:23px;background:#000;transform:rotate(-11deg);z-index:1;}
.beard2::before{content:"";width:110px;height:2px;position:absolute;top:20px;left:0px;background:#000;transform:rotate(9deg);z-index:1;}
.beard2::after{content:"";width:110px;height:2px;position:absolute;top:40px;right:7px;background:#000;transform:rotate(20deg);z-index:1;}