<div class="cartoon">
  <div class="chin"></div>
  <div class="chin-top b"></div>
  <div class="lip-bottom"></div>
  <div class="lip-top"></div>
  <div class="lip-top-top f"></div>
  <div class="nose-tip"></div>
  <div class="nose s"></div>
  <div class="eye-line"></div>
  <div class="forehead"></div>
  <div class="neck"></div>
  <div class="shadow"></div>
</div>

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

.cartoon {
  --color: #000;
  color: var(--color);
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.cartoon:hover div {
  --color: rgba(0, 0, 0, 0.25);
  color: var(--color);
}

.cartoon div {
  position: absolute;
  border-radius: 100%;
}

.chin {
  width: 12%;
  height: 12%;
  top: 70%;
  left: 20%;
  background: var(--color);
}

.chin-top {
  width: 8%;
  height: 8%;
  top: 65%;
  left: 15%;
  box-shadow: 4vmin 0;
}

.lip-bottom {
  width: 5%;
  height: 5%;
  top: 62%;
  left: 21%;
  background: var(--color);
}

.lip-top {
  width: 6%;
  height: 6%;
  top: 57%;
  left: 20%;
  background: var(--color);
}

.lip-top-top {
  width: 7%;
  height: 7%;
  top: 54%;
  left: 14%;
  box-shadow: 4vmin -1vmin;
  background: white;
}

.nose-tip {
  width: 7%;
  height: 7%;
  top: 48%;
  left: 15%;
  background: var(--color);
  box-shadow: 1.75vmin 1.75vmin 0 -1.5vmin;
}

.nose {
  width: 50%;
  height: 50%;
  left: -25.25%;
  top: 5%;
  box-shadow: 12vmin 3vmin 0 -8vmin
}

.forehead {
  width: 40%;
  height: 40%;
  top: 0%;
  left: 23%;
  background: var(--color);
}

.neck {
  width: 60%;
  height: 60%;
  top: 81.75%;
  box-shadow: 12vmin -5vmin
}

.shadow {
  width: 50%;
  height: 50%;
  background: var(--color);
  top: 30%;
  left: 25%;
  box-shadow: -7vmin 6vmin 0 -5vmin, -10vmin -6vmin 0 -7vmin, -20vmin -4vmin 0 -15vmin;
}


/***/

#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;
}