<div class="cartoon hb">
  <div class="body ha hb"></div>
  <div class="neck hb ha"></div>
  <div class="ear ha hb"></div>
  <div class="face">
    <div class="glass hb ha"></div>
    <div class="glass hb"></div>
    <div class="eyebrow"></div>
    <div class="eyebrow"></div>
<!--     <div class="mouth"></div> -->
<!--     <div class="nose"></div> -->
  </div>
</div>

<a id="youtube" href="https://www.youtube.com/watch?v=_zjR-zUF4l4" target="_blank">
  <span>See how this drawing was made</span>
</a>

html, body {
  overflow: hidden;
  background: #deeeef;
}

.cartoon {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 80vmin;
  height: 80vmin;
  background-image: radial-gradient(white, transparent 60%);
}

.cartoon div {
  position: absolute;
  box-sizing: border-box;
}

.b {
  border: 0.5vmin solid;
}

.r {
  border-radius: 100%;
}

.hb::before,
.ha::after {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
}

/****/
.cartoon {
  --skin: #fca;
  --skindark: #fb9;
  --skindarker: #ea8;
  --shirt: #fff;
  --shirtdark: #eee;
  --jacket: #222;
  --jacketdark: #111;
  --tie: #369;
  --tiedark: #258;
  --glass: #000;
  --hair: #631;
}

.face {
  background: var(--skin);
  width: 42%;
  height: 60%;
  border-radius: 100% / 60% 60% 120% 120%;
  box-shadow: 
    inset 1.5vmin -0.25vmin 0.5vmin var(--skindark),
    inset 0 -1vmin 0 -0.5vmin var(--skindark),
    inset -1.5vmin 0 0.5vmin rgba(255,255,255,0.2);
  top: 4%;
  left: 50%;
  transform: translate(-50%, 0);
}

.neck {
  width: 22%;
  height: 60%;
  background: var(--shirt);
  border-radius: 100% / 30% 30% 160% 160%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 
    -3vmin 11vmin 0 5vmin var(--jacketdark), 
    3vmin 11vmin 0 5vmin var(--jacketdark), 
    0 30vmin 0 11vmin var(--jacketdark);
  overflow: hidden;
}

.neck::after {
  width: 140%;
  height: 80%;
  background: var(--skin);
  border-radius: 100% / 50% 50% 120% 120%;
  left: 50%;
  top: -52%;
  transform: translate(-50%, 0);
  box-shadow: 
    -7vmin 5.5vmin var(--shirtdark), 
    7vmin 5.5vmin var(--shirtdark);
}

.neck::before {
  width: 50%;
  height: 100%;
  background: var(--tie);
  top: -55%;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50% / 70%;
  box-shadow: 0 47.5vmin var(--tiedark)
}


.body {
  width: 83%;
  height: 120%;
  background: var(--jacket);
  border-radius: 100% / 30% 30% 200% 200%;
  top: 60%;
  left: 50%;
  transform: translate(-50%, 0);
}

.body::before {
  width: 30%;
  height: 100%;
  background: var(--jacket);
  border-radius: 100% 0 0 0;
  left: -25%;
  top: 7%;
}

.body::after {
  width: 30%;
  height: 100%;
  background: var(--jacket);
  border-radius: 0 120% 0 0;
  right: -25%;
  top: 7%;
}

.ear {
  width: 10%;
  height: 25%;
  background: red;
  top: 28%;
  left: 50%;
  transform: translate(-50%, 0);
}

.ear::before {
  width: 100%;
  height: 100%;
  background: var(--skin);
  border-radius: 100% / 80% 80% 0 140%;
  transform: translate(-15vmin, 0) rotate(-16deg);
}

.ear::after {
  width: 100%;
  height: 100%;
  background: var(--skin);
  border-radius: 100% / 80% 80% 140% 0%;
  transform: translate(15vmin, 0) rotate(16deg);
}

.glass {
  width: 40%;
  height: 15%;
  background: #444;
  background:linear-gradient(#222, #444);
  top: 40%;
  left: 5%;
  border-radius: 100% / 20% 20% 80% 100%;
  border: 0.5vmin solid;
  border-top: 1vmin solid;
}

.glass::before {
  width: 20%;
  height: 20%;
  background: var(--glass);
  left: -20%;
}

.glass::after {
  width: 36%;
  height: 60%;
  border: 0.5vmin solid transparent;
  border-top: 1vmin solid var(--glass);
  border-radius: 50%;
  right: -36%;
}

.glass + .glass {
  transform: scaleX(-1);
  left: auto;
  right: 5%;
}

.eyebrow {
  width: 40%;
  height: 20%;
  border-radius: 100% / 50%;
  box-shadow: 0.75vmin -2vmin 0 -1vmin var(--hair);
  top: 37%;
  left: 4%;
  transform: rotate(-4deg);
}

.eyebrow + .eyebrow {
  left: auto;
  right: 4%;
  top: 36.5%;
  transform: scaleX(-1) rotate(-5deg)
}

.mouth {
  width: 28%;
  height: 3%;
  aborder-radius: 100% / 50%;
  border-radius: 0 0 100vmin 100vmin;
  background: var(--skindark);
  aborder-bottom: 0.35vmin solid;
  top: 78%;
  left: 50%;
  transform: translate(-50%, 0) rotate(1deg);
}

.nose {
  width: 5vmin;
  height: 5vmin;
  background: var(--skin);
  border-radius: 50%;
  top: 60%;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 
    inset 0 -1vmin 0 -0.25vmin var(--skindarker),
    -2.75vmin -0.5vmin 0 -1vmin var(--skin),
    -3vmin 0 0 -1vmin var(--skindarker),
    2.75vmin -0.5vmin 0 -1vmin var(--skin),
    3vmin 0 0 -1vmin var(--skindarker)
}


/***/

#youtube {
  z-index: 2;
  display: block;
  width: 100px;
  height: 70px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: red;
  border-radius: 50% / 11%;
  transition: transform 0.5s;
}

#youtube:hover,
#youtube:focus {
  transform: scale(1.1);
}

#youtube::before {
  content: "";
  display: block;
  position: absolute;
  top: 7.5%;
  left: -6%;
  width: 112%;
  height: 85%;
  background: red;
  border-radius: 9% / 50%;
}

#youtube::after {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: 40px;
  width: 45px;
  height: 30px;
  border: 15px solid transparent;
  box-sizing: border-box;
  border-left: 30px solid white;
}

#youtube span {
  font-size: 0;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}