<div class="cartoon hb">
  <div class="screws ha hb"></div>
  <div class="neck"></div>
  <div class="ear ha hb"></div>
  <div class="ear ha hb"></div>
  <div class="head">
    <div class="eye r ha hb"></div>
    <div class="eye r ha hb"></div>
    <div class="mouth b r ha hb"></div>
  </div>
  <div class="forehead ha hb">
    <div class="scar"></div>
  </div>
  <div class="hair"></div>
</div>

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

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

.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: #bc5;
  --skin-dark: #ab4;
  --skin-darker: #892;
  --hair: #222;
  --blood: #b00;
  --metal: #889;
}

.head {
  width: 60%;
  height: 75%;
  background: var(--skin);
  border-radius: 90% / 150% 150% 20% 20%;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0);
  background: linear-gradient(var(--skin) 50%, var(--skin-dark));
}

.forehead {
  width: 60%;
  height: 32%;
  background: var(--skin);
  border-radius: 100% / 90% 40% 20% 20%;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  overflow: hidden;
  background: linear-gradient(var(--skin-darker) , var(--skin) 68%)
}

.forehead::before {
  width: 98%;
  height: 25%;
  background: var(--hair);
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 10vmin 10vmin 0 0;
  box-shadow: 0 0 0 0.25vmin var(--skin), -0.5vmin 0 var(--hair), 0.5vmin 0 var(--hair);
}

.forehead::after {
  width: 80%;
  height: 10%;
  background: var(--skin);
  left: 50%;
  bottom: 22%;
  transform: translate(-50%, 0);
  border-radius: 50%;
}

.ear {
  width: 30%;
  height: 40%;
  border-radius: 100% 50% 30% 120%;
  top: 30%;
  left: 10%;
  transform: rotate(-10deg);
  background: var(--skin);
  background: linear-gradient(to right, var(--skin), var(--skin-dark) 70%);
}

.ear + .ear {
  left: 63%;
  transform: scaleX(-1) rotate(-8deg);
}

.ear::before {
  width: 70%;
  height: 60%;
  background: var(--skin-dark);
  background: linear-gradient(to right, var(--skin), var(--skin-dark));
  border-radius: 50%;
  top: 20%;
  left: 10%;
  box-shadow: inset -3vmin 2vmin 2vmin var(--skin-darker), inset -3vmin -0.5vmin 2vmin var(--skin-darker);
  abox-shadow: inset -3vmin 1vmin var(--skin-darker), inset -3.5vmin -0.25vmin var(--skin-darker);
}

.ear::after {
  width: 10vmin;
  height: 10vmin;
  background: var(--skin-dark);
  abox-shadow: 0 0 4vmin -0.5vmin var(--skin-darker);
  border-radius: 50%;
  top: 40%;
  left: 33%;
}

.ear + .ear::after {
  left: 38%;
}

.hair {
  background: var(--hair);
  width: 65%;
  height: 35%;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 90% / 50% 50% 100% 100%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 95% 60%, 89% 80%, 85% 65%, 76% 90%, 70% 70%, 64% 95%, 60% 80%, 55% 100%, 49% 60%, 43% 97%, 37% 55%, 34% 90%, 28% 64%, 20% 80%, 15% 63%, 10% 80%, 6% 60%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 95% 50%, 89% 70%, 85% 55%, 76% 80%, 70% 60%, 64% 85%, 60% 70%, 55% 90%, 49% 50%, 43% 87%, 37% 55%, 34% 80%, 28% 54%, 20% 70%, 15% 53%, 10% 70%, 6% 60%, 0% 100%);
}

.neck {
  width: 45%;
  height: 45%;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--skin);
  top: 70%;
  border-radius: 20vmin / 100%;
}

.eye {
  width: 20vmin;
  height: 20vmin;
  background: white;
  top: 12%;
  left: 7%;
  box-shadow: -0.75vmin 1vmin 0 1.5vmin var(--skin-dark);
}

.eye + .eye {
  left: auto;
  right: 7%;
  box-shadow: 0.75vmin 1vmin 0 1.5vmin var(--skin-dark);
}

.eye::before {
  width: 30%;
  height: 30%;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: inset 1vmin -1.5vmin 0 2vmin var(--hair), 0 0 0 1vmin var(--skin-darker);
}

.mouth {
  bottom: 5%;
  height: 20%;
  width: 80%;
  border-color: transparent;
  border-top-color: var(--skin-darker);
  left: 50%;
  transform: translate(-50%) rotate(5deg);
}

.mouth::after {
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  border: 0.25vmin solid transparent;
  border-top: 0.5vmin solid var(--skin-darker);
  transform: translate(-55%, 0) rotate(-5deg);
  top: -100%;
  left: 50%;
  background: var(--skin-dark);
  background: linear-gradient(var(--skin-dark), transparent 30%);
}

.scar {
  width: 40%;
  height: 20%;
  background: #f007;
  top: 50%;
  left: 10%;
  transform: rotate(-10deg);
  background: linear-gradient(to right, transparent 20%, var(--metal) 0 25%, transparent 0 45%, var(--metal) 0 50%, transparent 0 70%, var(--metal) 0 75%, transparent 0), linear-gradient(transparent 45%, var(--blood) 0 55%, transparent 0);
}

.screws {
  width: 68%;
  height: 7%;
  background: var(--metal);
  background-image: linear-gradient(rgba(0,0,0,0.1), transparent);
  top: 22%;
  left: 50%;
  transform: translate(-50%, 0);
}

.screws::before,
.screws::after {
  width: 4vmin;
  height: 120%;
  background: var(--metal);
  top: -10%;
  left: -3vmin;
  background-image: linear-gradient(to right, rgba(0,0,0,0.1), transparent)
}

.screws::after {
  left: 98%;
  background-image: linear-gradient(to left, rgba(0,0,0,0.1), transparent)
}


/***/

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