<div style="transform:scale(1.4);">
  <div class="ear"></div>
  <div class="ear"></div>
  <div id="head">
    <div id="forehead">
      <div class="eyes"></div>
      <div class="eyes"></div>
    </div>
    <div id="muzzle">
      <div id="nose"></div>
    </div>
  </div>
</div>
*{
  margin:0;
}

:root{
  --bg : #bcb99d;
  --forehead: #c4c4c4;
  --face: #e4e4e4;
  --nose: #69350d;
  --ears:#939393;
}

body{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  background: var(--bg);
}

#head{
  width:25vw;
  height:22vw;
  background: var(--face);
  border-radius:25vw 25vw 4vw 4vw;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

#forehead{
  position:absolute;
  width:100%;
  height:50%;
  top:0;
  background:var(--forehead);
}

#forehead::before, #forehead::after{
  content:'';
  background:var(--face);
  width:15vw;
  height:15vw;
  position:absolute;
  top:5vw;
  border-radius:50%;
}

#forehead::before{
  left:-1vw;
}

#forehead::after{
  right:-1vw;
}

.eyes{
  position:absolute;
  background:#000;
  width:2.5vw;
  height:2.5vw;
  top:8.5vw;
  left:7.5vw;
  border-radius:50%;
  z-index:3;
}

.eyes:nth-child(2){
  left:initial;
  right:7.5vw;
}

.stripe{
  background:var(--stripe);
  width:18vw;
  height:4vw;
  position:absolute;
  top:11.5vw;
  z-index:2;
  transform:rotate(50deg);
  border-radius:3.5vw;
  right:-5.75vw;
}

.stripe:nth-child(2){
  transform:rotate(-50deg);
  left:-5.75vw;
  right:auto;
}

#muzzle{
  background:#efefef;
  width:7vw;
  height:6vw;
  border-radius:4vw;
  position:absolute;
  bottom:2vw;
  transform:scale(1.4);
  display:flex;
  justify-content:center;
}

#nose{
  background:var(--nose);
  width:45%;
  height:2vw;
  border-radius:2vw;
  position:absolute;
  top:.5vw;
}

.ear{
  width:6vw;
  background:var(--ears);
  height:18vw;
  border-radius:8vw;
  position:absolute;
  margin-left:2.5vw;
  display:flex;justify-content:center;
  margin-top:-5vw;
}

.ear:nth-child(2){
  margin-left:16.5vw;
}

.ear::after{
  content:'';
  width:4vw;
  background:#e1e5e4;
  height:100%;
  top:1vw;
  position:absolute;
  border-radius:6vw;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.