<div id="deer">
  <div class="ears"></div>
  <div class="ears"></div>
  <div class="horn"></div>
  <div class="horn"></div>
  <div id="head">
    <div class="eyes"></div>
    <div class="eyes"></div>
    <div id="muzzle">
      <div id="nose"></div>
    </div>
  </div>
</div>
*{
  margin:0;
}

:root{
  --bg : #a4ac86;
  --ears: #cc9e3c;
  --face: #e8b444;
  --nose: #884a1b;
  --muzzle:#efefef;
  --eyes:#653715;
  --horn:#66370d;
}

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

#head{
  width:30vw;
  height:40vw;
  background:var(--face);
  border-radius:15vw 15vw 30vw 30vw;
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:center;
  margin-bottom:-10vw;
}

#muzzle{
  background:var(--muzzle);
  width:30vw;
  position:absolute;
  height:30vw;
  border-radius:50%;
  bottom:-12.5vw;
  display:flex;
  justify-content:center;
  overflow:hidden;
}

#nose{
  background:var(--nose);
  width:6vw;
  height:6vw;
  border-radius:50%;
  top:-2.5vw;
  position:absolute;
}

.eyes{
  position:absolute;
  width:8vw;
  height:8vw;
  background:#efefef;
  border-radius:50%;
  top:12vw;
  left:4vw;
  display:flex;
  align-items:center;
  justify-content:center;
}

.eyes:nth-child(2){
  left:auto;
  right:4vw;
}

.eyes::after{
  content:'';
  background:var(--eyes);
  width:65%;
  height:65%;
  border-radius:50%;
}

.ears{
  position:absolute;
  width:15vw;
  height:8vw;
  background:var(--ears);
  border-radius:0 0 0 8vw;
  margin-left:-8.5vw;
  border-left:2.5vw solid #6d3914;
}

.ears:nth-child(2){
  margin-left:21.5vw;
  border-left:none;
  border-radius:0 0 8vw 0;
  border-right:2.5vw solid #6d3914;
  
}

.horn{
  width:4vw;
  height:15vw;
  background:var(--horn);
  position:absolute;
  margin-top:-15vw;
  margin-left:7vw;
  border-radius:4vw 4vw 0 0;
}

.horn:nth-child(3){
  margin-left:19vw;
}

.horn::after{
  content:'';
  width:100%;
  height:10vw;
  border-radius:4vw 4vw 0 0;
  background:var(--horn);
  transform:rotate(-45deg);
  position:absolute;
  top:3vw;
  left:-3vw;
}

.horn:nth-child(3)::after{
  transform:rotate(45deg);
  left:auto;
  right:-3vw;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.