<div role="img" aria-label="A cartoon of a (surprised) Frankenstein's Monster popping up from the bottom of the screen. Green skin, scars in the face, screws popping from forehead and neck."></div>

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

div {
  --hair: #222;
  --skin: #7b6;
  --skin-dark: #6a5;
  --skin-darker: #594;
  --skin-medium: #7abf6a;
  --skin-light: #8c7;
  width: 100vmin;
  height: 73vmin;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  background:
    /* ears */
    radial-gradient(farthest-side at 50% 50%, #00000008 85%, #0002 0 99%, #0000 0) 26.5% 52% / 6vmin 6vmin,
    radial-gradient(farthest-side at 50% 100%, #0000 90%, #0002 0 99%, #0000 0) 23% 41% / 12vmin 6vmin,
    radial-gradient(farthest-side at 50% 0%, #0000 88%, #0002 0 99%, #0000 0) 24% 57% / 11vmin 4vmin,
    radial-gradient(farthest-side at 70% 51%, var(--skin-medium), var(--skin-dark) 90%, #0000 0) 18% 44% / 19% 38%,
    
    radial-gradient(farthest-side at 50% 50%, #00000008 85%, #0002 0 99%, #0000 0) 73.5% 52% / 6vmin 6vmin,
    radial-gradient(farthest-side at 50% 100%, #0000 90%, #0002 0 99%, #0000 0) 77% 41% / 12vmin 6vmin,
    radial-gradient(farthest-side at 50% 0%, #0000 88%, #0002 0 99%, #0000 0) 76.5% 57% / 9.5vmin 4vmin,
    radial-gradient(farthest-side at 30% 51%, var(--skin-medium), var(--skin-dark) 90%, #0000 0) 83% 44% / 18% 39%,
    /* fingers */
    radial-gradient(farthest-side at 50% 100%, var(--skin) 99.9%, transparent 0) 0% 102% / 9vmin 5vmin,
    radial-gradient(farthest-side at 50% 100%, var(--skin) 99.9%, transparent 0) 9% 100% / 9vmin 5vmin,
    radial-gradient(farthest-side at 50% 100%, var(--skin) 99.9%, transparent 0) 19% 101% / 9vmin 5vmin,
    
    radial-gradient(farthest-side at 50% 100%, var(--skin) 99.9%, transparent 0) 100% 101.5% / 9vmin 5vmin,
    radial-gradient(farthest-side at 50% 100%, var(--skin) 99.9%, transparent 0) 91% 100% / 9vmin 5vmin,
    radial-gradient(farthest-side at 50% 100%, var(--skin) 99.9%, transparent 0) 82% 100% / 9vmin 5vmin,
    /* neck */
    radial-gradient(farthest-side at 50% 20%, var(--skin) 45%, #0000 0) 50% 95% / 50% 15%,
    radial-gradient(farthest-side at 50% 0, #0002 50%, #0000 66%) 50% 98% / 45% 15%,
    linear-gradient(var(--skin) 0 0) 50% 100% / 30% 30%,
    /* screws */
    linear-gradient(darkgray 20%, gray 0 80%, darkgray 0) 24% 18.5% / 3% 10%,
    linear-gradient(darkgray 18%, gray 0 80%, darkgray 0) 75.5% 18.5% / 3% 10%,
    linear-gradient(darkgray 0 0) 50% 20% / 54% 5%,
    linear-gradient(darkgray 0 0) 49% 94% / 34% 5%
    ;
  background-repeat: no-repeat;
}

div::before,
div::after {
  content: "";
  display: block;
  position: absolute;
}

div::before {
  width: 45vmin;
  height: 60vmin;
  left: 50%;
  transform: translate(-50%, 5%);
  border-radius: 100% / 130% 130% 30% 30%;
  background:
    /* eyes */
    radial-gradient(closest-side, white 30%, transparent 0) 30% 38% / 3vmin 3vmin,
    radial-gradient(closest-side, white 30%, transparent 0) 32% 39.5% / 1.5vmin 1.5vmin,
    radial-gradient(closest-side, white 30%, transparent 0) 74.5% 38% / 3vmin 3vmin,
    radial-gradient(closest-side, white 30%, transparent 0) 75% 39.5% / 1.5vmin 1.5vmin,
    radial-gradient(closest-side, black 30%, orange 0 65%, transparent 0) 23% 38% / 10vmin 10vmin,
    radial-gradient(closest-side, black 30%, orange 0 65%, transparent 0) 77% 38% / 10vmin 10vmin,
    radial-gradient(farthest-side at 50% 0%, white 90%, transparent 0) 13% 39% / 40% 15%,
    radial-gradient(farthest-side at 50% 0%, var(--skin-dark) 90%, transparent 0) 8% 41% / 45% 21%,
    radial-gradient(farthest-side at 50% 0%, white 90%, transparent 0) 87% 39% / 40% 15%,
    radial-gradient(farthest-side at 50% 0%, var(--skin-dark) 90%, transparent 0) 92% 41% / 45% 21%,
    /* scar */
    linear-gradient(-25deg, #0000 52%, gray 0 55%, #0000 0) 87% 74% / 7% 35%,
    linear-gradient(-25deg, #0000 52%, gray 0 55%, #0000 0) 89% 80% / 7% 35%,
    linear-gradient(-25deg, #0000 52%, gray 0 55%, #0000 0) 91% 87% / 7% 35%,
    linear-gradient(-25deg, #0000 52%, gray 0 55%, #0000 0) 94% 94% / 7% 35%,
    linear-gradient(70deg, #0000 51%, var(--skin-darker) 0 55%, #0000 0) 95% 75% / 20% 20%,
    /* mouth */
    radial-gradient(farthest-side at 50% 100%, var(--skin) 99.9%, #0000 0) 50% 90% / 80% 5%,
    radial-gradient(farthest-side at 50% 100%, transparent 90%, var(--skin) 0) 50% 87% / 60% 15%,
    radial-gradient(farthest-side at 50% 100%, #d00 90%, #0000 0) 45% 87% / 25% 7%,
    radial-gradient(farthest-side at 50% 100%, #d00 90%, #0000 0) 55% 87% / 25% 7%,
    linear-gradient(#ee8 25%, #600 0) 50% 87% / 59% 14%,
    /* nose */
    radial-gradient(farthest-side at 50% 100%, var(--skin-darker) 0 99.9%, #0000 0) 50% 55% / 10vmin 10vmin,
    radial-gradient(farthest-side at 50% 0%, var(--skin-darker) 0 99.9%, #0000 0) 50% 65% / 10vmin 4vmin,
    radial-gradient(farthest-side at 50% 40%, var(--skin-darker) 0 70%, #0000 0) 35% 65% / 7vmin 4vmin,
    radial-gradient(farthest-side at 50% 40%, var(--skin-darker) 0 70%, #0000 0) 65% 65% / 7vmin 4vmin,
    /* skin */
    linear-gradient(var(--skin-light), var(--skin) 70%)
    ;
  background-repeat: no-repeat;
  background-color: var(--skin);
}

div::after {
  width: 45vmin;
  height: 25vmin;
  left: 50%;
  transform: translate(-50%, 0%);
  border-radius: 50% / 20% 20% 10% 10%;
  background:
    /* hair */
    conic-gradient(at 50% 100%, var(--hair) 20deg, #0000 0 330deg, var(--hair) 0) 0% 24% / 20% 20%,
    conic-gradient(at 50% 100%, var(--hair) 40deg, #0000 0 340deg, var(--hair) 0) 8% 19% / 20% 20%,
    conic-gradient(at 50% 100%, var(--hair) 20deg, #0000 0 340deg, var(--hair) 0) 18% 21% / 20% 20%,
    conic-gradient(at 50% 100%, var(--hair) 40deg, #0000 0 325deg, var(--hair) 0) 28% 24% / 20% 20%,
    conic-gradient(at 50% 100%, var(--hair) 20deg, #0000 0 320deg, var(--hair) 0) 38% 21% / 20% 20%,
    conic-gradient(at 50% 100%, var(--hair) 20deg, #0000 0 330deg, var(--hair) 0) 48% 24% / 20% 20%,
    conic-gradient(at 50% 100%, var(--hair) 30deg, #0000 0 335deg, var(--hair) 0) 58% 21% / 20% 20%,
    conic-gradient(at 50% 100%, var(--hair) 45deg, #0000 0 330deg, var(--hair) 0) 70% 17% / 20% 20%,
    conic-gradient(at 50% 100%, var(--hair) 35deg, #0000 0 340deg, var(--hair) 0) 78% 24% / 20% 20%,
    conic-gradient(at 50% 100%, var(--hair) 20deg, #0000 0 325deg, var(--hair) 0) 90% 21% / 20% 20%,
    conic-gradient(at 50% 100%, var(--hair) 30deg, #0000 0 330deg, var(--hair) 0) 100% 24% / 20% 20%,
    radial-gradient(farthest-side at 0% 0%, var(--hair) 90%, #0000 91%) 0 0 / 5% 80%,
    radial-gradient(farthest-side at 100% 0%, var(--hair) 90%, #0000 91%) 100% 0 / 5% 75%,
    /* scar */
    linear-gradient(20deg, #0000 50%, gray 0 55%, #0000 0) 18% 75% / 7% 35%,
    linear-gradient(20deg, #0000 50%, gray 0 55%, #0000 0) 19% 58% / 7% 35%,
    linear-gradient(20deg, #0000 50%, gray 0 55%, #0000 0) 21% 43% / 7% 35%,
    linear-gradient(-80deg, #0000 50%, var(--skin-darker) 0 55%, #0000 0) 15% 60% / 20% 35%,
    
    /* eye brows*/
    radial-gradient(farthest-side at 0% 100%, var(--hair) 90%, #0000 91%) 47% 106% / 3% 31%,
    radial-gradient(farthest-side at 100% 100%, var(--hair) 90%, #0000 91%) 53% 106% / 3% 31%,
    
    linear-gradient(to right, #0000 46%, var(--skin) 0 54%, #0000 0) 50% 110% / 100% 35%,
    radial-gradient(70% 80% at 50% 120%, var(--hair) 85%, transparent 0) 50% 100% / 100% 50%,
    /* forehead lines */
    radial-gradient(100% 60% at 50% 120%, var(--skin-dark) 39%, transparent 0) 50% 30% / 110% 50%,
    radial-gradient(100% 60% at 50% 120%, var(--skin-dark) 40%, transparent 0) 50% 10% / 130% 50%,
    radial-gradient(100% 60% at 50% 120%, var(--skin-dark) 39%, transparent 0) 50% -10% / 100% 50%,
    /* forehead base */
    linear-gradient(var(--hair) 20%, var(--skin-light) 0, var(--skin) 80%)
    ;
  background-repeat: no-repeat;
  background-color: 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;
}