<div role="img" aria-label="Cartoon of a fancy-looking British gentleman with a hat, a monocle, a cup of tea, and an umbrella."></div>


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

div {
  --skin: #fca;
  --skin-dark: #ea9;
  --tie: #d00;
  --shirt: #fff;
  --hair: #963;
  width: 60vmin;
  height: 90vmin;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0);
  background:
    /* shirt */
    conic-gradient(at 50% 100%, transparent 13deg, black 0 347deg, transparent 0) 49% 39% / 10% 14%,
    conic-gradient(at 50% 200%, var(--tie) 13deg, transparent 0 347deg, var(--tie) 0) 48.75% 35% / 5% 4%,
    conic-gradient(at 48.5% -30%, var(--shirt) 175deg, var(--tie) 0 185deg, var(--shirt) 0) 49% 39% / 9.5% 13.5%,
    /* body */
    linear-gradient(5deg, transparent 4%, black 4.25%) 50% 50% / 18% 35%,
    radial-gradient(farthest-side, black 99.9%, transparent 0) 50.5% 65% / 16.75% 10%,
    /* legs */
    radial-gradient(ellipse 140% 110% at 0% 0%, transparent 60%, black 0 99.9%, transparent 0) 35% 100% / 15% 3%,
    radial-gradient(ellipse 140% 110% at 100% 0%, transparent 60%, black 0 99.9%, transparent 0) 72.25% 100% / 15% 3%,
    radial-gradient(ellipse 50% 75%, black 99.9%, transparent 0) 43.5% 100% / 3.5% 5%,
    radial-gradient(ellipse 50% 75%, black 99.9%, transparent 0) 62.5% 101% / 3.5% 4%,
    linear-gradient(92deg, transparent 20%, black 20.5% 80%, transparent 80.5%) 44.75% 97% / 6% 34%,
    linear-gradient(80deg, transparent 37%, black 37.5% 58%, transparent 58.5%) 59.25% 96% / 12% 34%,
    /* arms */
    radial-gradient(farthest-side at 50% 100%, transparent 50%, brown 0 99.9%, transparent 0) 93% 60% / 12% 5%,
    radial-gradient(closest-side, var(--skin) 99.9%, transparent) 10% 23% / 10% 7%,
    radial-gradient(closest-side, var(--skin) 99.9%, transparent) 87% 65.5% / 8% 7%,
    radial-gradient(closest-side, var(--skin) 99.9%, transparent) 82.5% 65% / 5% 5%,
    linear-gradient(60deg, transparent 40%, black 40.5% 48%, transparent 48.5%) 80% 44.5% / 30% 32%,
    radial-gradient(farthest-side at 55% 30%, transparent 80%, black 0 99.9%, transparent 0) 16.25% 30% / 30% 20%,
    /* cup */
    radial-gradient(ellipse 50% 80% at 50% 25%, #ddd 99%, transparent 0) 22.5% 23.25% / 10% 5%,
    radial-gradient(farthest-side at 60% 50%, transparent 70%, #ddd 0 99%, transparent 0) 18% 23.5% / 4% 4%,
    radial-gradient(farthest-side at 50% 100%, var(--skin) 99%, transparent 0) 6% 27% / 7% 1.5%,
    radial-gradient(farthest-side, var(--skin) 99%, transparent 0) 16.5% 22.5% / 4% 2.5%,
    /* cane */
    conic-gradient(at 50% 130%, black 5deg, transparent 5.25deg 359deg, black 359.25deg) 87% 97% / 12% 29%,
    conic-gradient(at 50% 140%, brown 1deg, transparent 1.5deg 359deg, brown 359.25deg) 85% 100% / 6% 33%,
    radial-gradient(farthest-side, brown 99.9%, transparent 0) 93.25% 62% / 2.75% 1%
    ;
  background-repeat: no-repeat;
}

div::after {
  content: "";
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(20deg);
  background:
    /* hat */
    radial-gradient(farthest-side at 50% 0%, #222 99.9%, transparent) 35% 16% / 22% 3%,
    radial-gradient(farthest-side at 50% 100%, #222 99.9%, transparent) 35% 10% / 22% 7%,
    radial-gradient(farthest-side, black 99.9%, transparent) 33% 14% / 30% 8%,
    /* ear */
    radial-gradient(farthest-side at 35% 60%, transparent 80%, var(--skin-dark) 0 99.9%, transparent) 56% 32% / 4% 3%,
     radial-gradient(farthest-side, var(--skin) 99.9%, transparent) 57% 28% / 10% 10%,
    /* eyes */ 
    radial-gradient(farthest-side, #def8 90%, orange 0 99.9%, transparent 0) 27% 30% / 14.5% 10%,
    /*chain*/
    radial-gradient(farthest-side, orange 99.9%, transparent) 28.5% 37.5% / 1.5% 1%,
    radial-gradient(farthest-side, orange 99.9%, transparent) 29.25% 39% / 1.5% 1%,
    radial-gradient(farthest-side, orange 99.9%, transparent) 30% 40.5% / 1.5% 1%,
    radial-gradient(farthest-side, orange 99.9%, transparent) 30.75% 42% / 1.5% 1%,
    radial-gradient(farthest-side, orange 99.9%, transparent) 31.5% 43.5% / 1.5% 1%,
    radial-gradient(farthest-side, orange 99.9%, transparent) 32.5% 45% / 1.5% 1%,
    radial-gradient(farthest-side, orange 99.9%, transparent) 33.75% 46.5% / 1.5% 1%,
    radial-gradient(farthest-side, orange 99.9%, transparent) 35.75% 47.25% / 1.5% 1%,
    radial-gradient(farthest-side, orange 99.9%, transparent) 38% 47.75% / 1.5% 1%,
    radial-gradient(farthest-side, orange 99.9%, transparent) 40.25% 47.75% / 1.5% 1%,
    radial-gradient(farthest-side, orange 99.9%, transparent) 42% 47% / 1.75% 1.25%
    ;
  background-repeat: no-repeat;
}

div::before {
  content: "";
  position: absolute;
  top: 4.5%;
  left: 50%;
  width: 33%;
  height: 30%;
  border-radius: 120% / 200% 60% 70% 60%;
  box-shadow: 
    0vmin -2.5vmin 0 -1vmin var(--hair),
    inset 1vmin -1vmin #f001;
  transform: translate(-50%, 0);
  background:
    /* forehead */
    linear-gradient(var(--skin-dark), var(--skin-dark)) 40% 20% / 25% 1%,
    linear-gradient(var(--skin-dark), var(--skin-dark)) 40% 23% / 16% 1%,
    /* eyes */
    radial-gradient(farthest-side at 50% 100%, var(--skin-dark) 99.9%, transparent 0) 55% 40% / 18% 15%,
    radial-gradient(farthest-side at 50% 100%, var(--skin-dark) 99.9%, transparent 0) 17% 40% / 18% 15%,
    radial-gradient(farthest-side, black 99.9%, transparent 0) 53% 50% / 5% 8%,
    radial-gradient(farthest-side, black 99.9%, transparent 0) 18% 50% / 5% 8%,
    radial-gradient(farthest-side, white 99.9%, transparent 0) 55% 50% / 16% 18%,
    radial-gradient(farthest-side, white 99.9%, transparent 0) 17% 50% / 16% 18%,
    /* mustache */
    radial-gradient(farthest-side at 60% 50%, transparent 70%, var(--skin-dark) 0 90%, transparent) 34% 70% / 10% 10%,
    radial-gradient(farthest-side at 50% 100%, var(--hair) 99.9%, transparent 0) 29% 80% / 40% 10%,
    
    /* hair */
    radial-gradient(farthest-side, var(--hair) 99.9%, transparent 0) 100% 10% / 20% 60%
    ;
  background-color: #fca;
  background-repeat: no-repeat;
}


/***/

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

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