<div role="img" aria-label="Cartoon character (chibi/anime style)"></div>

<a id="youtube" href="https://www.youtube.com/watch?v=NAuxqUEqr68" target="_blank"><span>Watch how this drawing was coded</span></a>

body {
  overflow: hidden;
}

div {
  --skin: #fca;
  --skin-dark: #fb9;
  --skin-dark-semi: #fb9c;
  --eye: #b6b;
  --hair: #c8c;
  --hair-dark: #b7b;
  --hair-light: #d9d;
  --cheeks: #f002;
  --cheeks-bright: #f003;
  --hair-clip: #324;
  /* color alternative */
/*   
  --skin: #963;
  --skin-dark: #852;
  --skin-dark-semi: #852c;
  --eye: #6b6;
  --hair: #321;
  --hair-dark: #2c1c10;
  --hair-light: #432;
  --cheeks: #a002;
  --cheeks-bright: #a003;
  --hair-clip: darkturquoise;
  */
  font-size: 1vmin;
  box-sizing: border-box;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 80vmin;
  height: 80vmin;
}

/* div::before {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 15%);
  box-shadow: 0 0 0 4em #fff;
  background: 
    radial-gradient(circle at 50% 18%, red 19%, #0000 0),
    radial-gradient(circle at 32% 12%, red 9%, #0000 0),
    radial-gradient(circle at 27% 30%, red 18%, #0000 0),
    radial-gradient(circle at 13% 53%, red 6%, #0000 0),
    radial-gradient(circle at 25% 50%, red 12%, #0000 0),
    radial-gradient(circle at 28% 80%, red 20%, #0000 0),
    radial-gradient(circle at 69% 25%, red 20%, #0000 0),
    radial-gradient(circle at 67% 60%, red 23%, #0000 0),
    radial-gradient(circle at 69% 90%, red 21%, #0000 0),
    #fff;
  filter: blur(3em) contrast(200) hue-rotate(-45deg) brightness(4) hue-rotate(320deg);
  mix-blend-mode: darken;
} */

div::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    /* ears */
    radial-gradient(farthest-side at 100% 0, var(--hair) 94%, #000 94.1% 99.9%, #0000) 23% 46% / 5% 10%,
    radial-gradient(farthest-side at 0 0, var(--hair) 96%, #000 96.1% 99.9%, #0000) 76% 46% / 8% 8%,
    radial-gradient(farthest-side, #6001 90%, #000 90.1% 99.9%, #0000) 28% 60% / 5% 6%,
    radial-gradient(farthest-side, #6001 90%, #000 90.1% 99.9%, #0000) 71.5% 60.5% / 5% 6%,
    radial-gradient(farthest-side at 100% 70%, #0000 94%, #000 94.1% 99.9%, #0000) 26% 52% / 5% 10%,
    radial-gradient(farthest-side at 0% 70%, #0000 94%, #000 94.4% 99.9%, #0000) 73.5% 53% / 5% 10%,
    radial-gradient(20% 30%, var(--skin-dark) 96.5%, #000 97% 99.5%, #0000) 15% 56% / 50% 50%,
    radial-gradient(19% 29%, var(--skin-dark) 95.75%, #000 96.3% 99.5%, #0000) 85% 57% / 50% 50%,
    /* neck */
    linear-gradient(90deg, #0000 2%, var(--skin) 0 98%, #0000 0) 50% 100% / 19% 40%,
    radial-gradient(40% 20% at 50% 108.5%, var(--skin) 98.8%, #000 99% 99.98%, #0000),
    linear-gradient(#000 0 0) 50% 100% / 19% 40%,
    radial-gradient(40% 24% at 50% 110%, var(--hair-dark) 94%, #0000),
    /* hair back */
    radial-gradient(farthest-side, var(--hair-dark) 89.9%, #0000) 51% 60% / 48% 70%,
    radial-gradient(farthest-side, var(--hair-dark) 89.9%, #0000) 49% 120% / 30% 40%,
    radial-gradient(farthest-side, var(--hair-dark) 59.9%, #0000) 36% 84% / 15% 15%,
    radial-gradient(farthest-side at 100% 0, var(--hair-dark) 89.9%, #0000) 27% 60% / 20% 30%,
    radial-gradient(farthest-side at 0 0, var(--hair-dark) 89.9%, #0000) 73% 53% / 20% 20%,
    
    radial-gradient(at 50% 100%, var(--hair-dark) 10%, #0000 50%),
    /* hair */
    linear-gradient(var(--hair) 0 0) 50% 100% / 60% 60%,
    radial-gradient(70% 60% at 52% 15%, var(--hair) 23%, #0000 23.1%),
    radial-gradient(circle at 32% 24%, var(--hair) 14%, #0000 15.6%),
    radial-gradient(70% 90% at 22.5% 46%, var(--hair) 20%, #0000 21.6%),
    radial-gradient(90% 80% at 22% 73%, var(--hair) 12%, #0000 13.1%),
    radial-gradient(circle at 30% 23%, var(--hair-light) 15%, #0000 15.1%),
    radial-gradient(circle at 22% 46%, var(--hair-light) 20%, #0000 20.1%),
    
    radial-gradient(100% 80% at 22% 72%, var(--hair-light) 13%, #0000 13.1%),
    radial-gradient(circle at 17% 82%, var(--hair) 4%, #0000 4.1%),
    radial-gradient(100% 80% at 25% 100%, var(--hair) 21%, #0000 24.1%),
    radial-gradient(100% 80% at 22% 100%, var(--hair-light) 23%, #0000 23.1%),
    radial-gradient(100% 130% at 72% 100%, var(--hair) 22%, #0000 23.1%),
    radial-gradient(circle at 74% 70%, var(--hair) 13%, #0000 14.1%),
    radial-gradient(circle at 72% 100%, var(--hair-dark) 23%, #0000 23.1%),
    
    radial-gradient(80% 75% at 80% 50%, var(--hair) 14%, #0000 15.1%),
    radial-gradient(56% 60% at 66% 20%, var(--hair) 29%, #0000 29.1%),
    radial-gradient(circle at 80% 29.5%, var(--hair) 12%, #0000 13.1%),
    radial-gradient(circle at 82% 30%, var(--hair-dark) 13%, #0000 13.1%),
    
    radial-gradient(80% 70% at 83% 50%, var(--hair-dark) 15%, #0000 15.1%),
    radial-gradient(circle at 77% 70%, var(--hair-dark) 14%, #0000 14.1%),
    radial-gradient(circle at 40% 85%, var(--hair) 14%, #0000 14.1%),
    
    #f000;
  background-repeat: no-repeat;
  filter: drop-shadow(-0.35em 0) drop-shadow(0 -0.2em) drop-shadow(0.35em 0);
}

div::after {
  content: "";
  width: 49em;
  height: 60em;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100% / 70% 70% 130% 130%;
  border: 0.25em solid;
  border-bottom: 0.5em solid;
  box-shadow: 
    /* neck-shadow */
    0 20em 1em -14em var(--skin-dark),
    /* hair-clip */
    0 -1em 1em -0.75em var(--hair-clip),
    0 -3em 2em -1.5em #fff3,
    0 -4em var(--hair-clip),
    0 -4.1em 0 0.15em,
    /* neck */
/*     0 37em 0 -15em var(--skin),
    -0.05em 37em 0 -14.7em, */
    0 0
  ;
  background: 
    /* freckles */
    radial-gradient(circle at 30% 64%, #6001 0.5%, #0000 0),
    radial-gradient(circle at 25% 63%, #6001 0.5%, #0000 0),
    radial-gradient(circle at 20% 65%, #6001 0.5%, #0000 0),
    
    radial-gradient(circle at 70.5% 64.2%, #6001 0.5%, #0000 0),
    radial-gradient(circle at 75% 62.9%, #6001 0.5%, #0000 0),
    radial-gradient(circle at 79.7% 64.9%, #6001 0.5%, #0000 0),
    /* eye 1 */
    radial-gradient(farthest-side, #fff 0 90%, #0000 95%) 27% 43.5% / 3% 2.5% no-repeat,
    radial-gradient(farthest-side, #fff 0 90%, #0000 95%) 24.5% 47% / 6% 5% no-repeat,
    radial-gradient(farthest-side, #fff 0 90%, #0000 95%) 33% 51% / 7% 7% no-repeat,
    radial-gradient(farthest-side, #000 0 90%, #0000 95%) 27% 48% / 12% 14% no-repeat,
    radial-gradient(farthest-side, #000, var(--eye) 50%, #0000 60%) 26% 51% / 20% 21% no-repeat,
    radial-gradient(farthest-side, #000 0 90%, #0000 91%) 26% 50% / 20% 21% no-repeat,
    radial-gradient(farthest-side, #fff 90%, #0000 91%) 20% 49% / 27% 23% no-repeat,
    
    /* eyelids 1*/
    radial-gradient(65% 50% at 50% 100%, #0000 85%, #000 85.5% 99.5%, #0000 0) 25% 33.5% / 12% 6% no-repeat,
    radial-gradient(farthest-side, #000 90%, #0000 91%) 19% 48% / 27% 23% no-repeat,
    radial-gradient(farthest-side, #000 90%, #0000 0) 20% 47% / 27% 24% no-repeat,
    radial-gradient(60% 100% at 50% 100%, #0000 90%, #000 91% 99.5%, #0000 0) 19% 44% / 25% 18% no-repeat,
    radial-gradient(farthest-side, #000 90%, #0000 91%) 20% 45% / 27% 23% no-repeat,
    radial-gradient(farthest-side, var(--skin-dark) 50%, #0000) 15% 33.5% / 35% 23% no-repeat,
    
    /* eye 2 */
    radial-gradient(farthest-side, #fff 0 90%, #0000 95%) 67.25% 43.5% / 3% 2.5% no-repeat,
    radial-gradient(farthest-side, #fff 0 90%, #0000 95%) 66% 47% / 6% 5% no-repeat,
    radial-gradient(farthest-side, #fff 0 90%, #0000 95%) 75.5% 51% / 7% 7% no-repeat,
    radial-gradient(farthest-side, #000 0 90%, #0000 95%) 72% 48% / 12% 14% no-repeat,
    radial-gradient(farthest-side, #000, var(--eye) 50%, #0000 60%) 74% 51% / 20% 21% no-repeat,
    radial-gradient(farthest-side, #000 0 90%, #0000 91%) 74% 50% / 20% 21% no-repeat,
    radial-gradient(farthest-side, #fff 90%, #0000 91%) 80% 49% / 27% 23% no-repeat,
    /* eyelids 2 */
    radial-gradient(65% 50% at 50% 100%, #0000 85%, #000 85.5% 99.9%, #0000 0) 75% 33.5% / 12% 6% no-repeat,
    radial-gradient(farthest-side, #000 90%, #0000 91%) 81% 48% / 27% 23% no-repeat,
    radial-gradient(farthest-side, #000 90%, #0000 91%) 80% 47% / 27% 24% no-repeat,
    radial-gradient(60% 100% at 50% 100%, #0000 90%, #000 91% 99.5%, #0000 0) 81% 44% / 25% 18% no-repeat,
    radial-gradient(farthest-side, #000 90%, #0000 91%) 80% 45% / 27% 23% no-repeat,
    radial-gradient(farthest-side, var(--skin-dark) 50%, #0000) 85% 34% / 35% 23% no-repeat,
    /* eyebrows */
    radial-gradient(farthest-side at 60% 60%, var(--skin) 99.5%, #0000 ) 13% 33% / 33% 17% no-repeat,
    radial-gradient(farthest-side at 70% 60%, #000 99%, #0000) 14.5% 31% / 30% 17% no-repeat,
    radial-gradient(farthest-side at 40% 60%, var(--skin) 99.5%, #0000) 87% 33% / 33% 17% no-repeat,
    radial-gradient(farthest-side at 30% 60%, #000 99%, #0000) 86% 31% / 29.5% 17% no-repeat,
    /* cheeks */
    radial-gradient(farthest-side, var(--cheeks) 30%, #f000) 12% 63% / 30% 15% no-repeat,
    radial-gradient(farthest-side, var(--cheeks) 30%, #f000) 88% 63% / 30% 15% no-repeat,
    radial-gradient(circle at 15% 70%, var(--cheeks-bright), #f000 30%),
    radial-gradient(circle at 85% 70%, var(--cheeks-bright), #f000 30%),
    /* nose 1 & 2*/
    linear-gradient(-30deg, #0000 47%, #000 0 52%, #0000 0) 49% 67% / 5% 5% no-repeat,
    linear-gradient(-20deg, #0000 45%, #000 0 52%, #0000 0) 51% 67.25% / 4% 4% no-repeat,
/*     linear-gradient(-30deg, #0000 47%, #000 0 52%, #0000 0) 49% 67% / 5% 5% no-repeat,
    linear-gradient(-25deg, #0000 45%, #000 0 52%, #0000 0) 49.85% 67.25% / 4% 4% no-repeat,
    linear-gradient(-20deg, #0000 45%, #000 0 52%, #0000 0) 51.5% 67.5% / 4% 4% no-repeat, */
    radial-gradient(farthest-side at 50% 20%, var(--skin-dark) 70%, #0000) 49.5% 69% / 10% 3% no-repeat,
    /* mouth */
    linear-gradient(var(--skin) 0 0) 46% 86% / 2.5% 20% no-repeat,
    radial-gradient(80% 100% at 50% 0, #0000 80%, #000 0 86%, #0000 0) 50% 86% / 20% 8% no-repeat,
    /* hair */
    radial-gradient(40% 20% at 14.5% -6%, var(--hair-dark) 76%, #000 76.1% 78%, #0000 78.1%),
    radial-gradient(70% 40% at 104.5% -12%, var(--hair-dark) 77%, #000 77.1% 78%, #0000 78.1%),
    radial-gradient(130% 100% at 30% 0.1%, var(--skin-dark) 10%, #0000 10.1%),
    radial-gradient(130% 100% at 30.5% 0.05%, #000 10%, #0000 10.1%),
    radial-gradient(130% 100% at 33% -0.5%, var(--hair) 10%, #0000 10.1%),
    radial-gradient(190% 100% at 35% -0.5%, var(--hair-dark) 10%, #0000 10.1%),
    radial-gradient(190% 100% at 35.4% 0%, #000 10%, #0000 10.1%),
    
    
    
    /* base */
    
    radial-gradient(53% 54% at 50% 55%, #0000 88%, var(--skin-dark-semi)),
    linear-gradient(var(--skin-dark) 5%, var(--skin) 20%),
    var(--skin);
}


/***/

#youtube {
  z-index: 2;
  display: block;
  width: 100px;
  height: 70px;
  position: absolute;
  top: 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;
}