<div role="img" aria-label="Cartoon of a tired man"></div>

div {
  --skin: #fca;
  --skin-shadow: #f865;
  --skin-shadow-light: #fb9;
  --hair: #963;
  --shirt: #bdf;
  --shirt-shadow: #9bd;
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background-image:
    /* neck */
    radial-gradient(closest-side, var(--skin-shadow) calc(100% - 0.75vmin), transparent 0),
    linear-gradient(to right, black 0.75vmin, var(--skin) 0 calc(100% - 0.75vmin), black 0),
    radial-gradient(closest-side, var(--skin) calc(100% - 0.75vmin), black 0 100%, transparent),
    /* body and arms */
    linear-gradient(95deg, transparent 50%, black 0 calc(50% + 0.6vmin), transparent 0),
/*     linear-gradient(80deg, transparent 50%, black 0 calc(50% + 0.6vmin), transparent 0), */
    conic-gradient(at 45% -20%, transparent 170deg, black 0 175deg, transparent 0),
    radial-gradient(ellipse 63% 50% at 50% 105%, var(--shirt) 0 65%, transparent 0),
    radial-gradient(ellipse 70% 60% at 50% 107%, var(--shirt-shadow) 0 60%, black 0 61%, transparent 0),
    radial-gradient(ellipse 70% 60% at 50% 106.5%, black 0 61%, transparent 0),
    /* ears */
    radial-gradient(ellipse 50% 70% at 50% 100%, transparent 50%, black 0 calc(50% + 0.6vmin), transparent 0),
    radial-gradient(ellipse 50% 70% at 50% 100%, transparent 50%, black 0 calc(50% + 0.6vmin), transparent 0),
    radial-gradient(ellipse 50% 70%, var(--skin-shadow) 50%, black 0 calc(50% + 0.6vmin), transparent 0),
    radial-gradient(ellipse 50% 70%, var(--skin-shadow) 50%, black 0 calc(50% + 0.6vmin), transparent 0),
    radial-gradient(ellipse 50% 70%, var(--skin) 50%, black 0 calc(50% + 0.6vmin), transparent 0),
    radial-gradient(ellipse 50% 70%, var(--skin) 50%, black 0 calc(50% + 0.6vmin), transparent 0),
    /* hair back */
    conic-gradient(transparent 60deg, black 0 70deg, transparent 0),
    radial-gradient(closest-side, var(--hair) 99.9%, transparent 0),
    radial-gradient(closest-side, var(--hair) 99.9%, transparent 0),
    radial-gradient(closest-side, var(--hair) 99.9%, transparent 0),
    radial-gradient(closest-side, black 99.9%, transparent 0),
    radial-gradient(closest-side, black 99.9%, transparent 0),
    radial-gradient(closest-side, black 99.9%, transparent 0)
    ;
  background-size:
    /* neck */
    18% 14%, 18% 14%, 21% 10%,
    /* body and arms */
    20% 15%, 20% 18%,
    100% 100%, 100% 100%, 100% 100%,
    /* ears */
    10% 8%, 10% 7%,
    10% 8%, 10% 7%,
    25% 25%, 25% 26%,
    /* hair back */
    7% 10%,
    14% 20%, 40% 20%, 14% 22%,
    14% 20%, 41.5% 21%, 14% 22%
    ;
  background-position:
    /* neck */
    50% 67%, 50% 69%, 50% 76.5%,
    /* body and arms */
    14% 110%, 85% 110%,
    0 0, 0 0, 0 0,
    /* ears */
    28% 45%, 71.5% 45%,
    30.4% 52%, 69.5% 53%,
    26% 48%, 73.5% 48%,
    /* hair back */
    69% 26%,
    30% 33%, 53% 16.5%, 70% 33%,
    29% 32.5%, 53% 15.75%, 71% 32.5%
    ;
  background-repeat: no-repeat;
}

@property --lip {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 52%;
}

@keyframes moveMouth {
  0%, 71%, 100% { --lip: 52%; }
  20.5%, 50% { --lip: 37%; }
  70% { --lip: 32%; }
}


div::before {
  --lip: 52%;
  animation: moveMouth 10s linear infinite;
  content: "";
  display: block;
  position: absolute;
  top: 23%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 36%;
  height: 45%;
  border: 1vmin solid black;
  border-right-width: 0.75vmin;
  border-left-width: 0.75vmin;
  border-radius: 80% / 100% 110% 45% 45%;
  box-shadow:
    inset -0.75vmin -1vmin 0 0vmin var(--skin-shadow),
    inset 1.25vmin -1vmin 0 -0.5vmin #fff4;
  clip-path: polygon(-5% 15%, 105% 15%, 105% 110%, -5% 110%);
  background-image:
    /* mouth */
    radial-gradient(closest-side, var(--skin) 99.9%, transparent 0),
    radial-gradient(closest-side, black 90%, transparent 0),
    /* nose */
    radial-gradient(closest-side, var(--skin) 99.9%, transparent 0),
    radial-gradient(closest-side, black 90%, transparent 0),
    /* eyebrows */
    radial-gradient(closest-side, var(--skin) 99.9%, transparent 0),
    radial-gradient(closest-side, var(--skin) 99.9%, transparent 0),
    radial-gradient(closest-side, black 90%, transparent 0),
    radial-gradient(closest-side, black 90%, transparent 0),
    /* hair */
    radial-gradient(closest-side, var(--hair) calc(100% - 1.25vmin), black 0 100%, transparent 0),
    linear-gradient(var(--hair) 14%, var(--skin) 0)
    ;
  background-size:
    /* mouth */
    55% 6%, var(--lip) 6%,
    /* nose */
    25% 20%, 22% 20%,
    /* eyebrows */
    50% 18%, 50% 18%, 32% 15%, 32% 15%,
    /* hair */
    80% 17.5%,
    100% 100%
    ;
  background-position:
    /* mouth */
    50% 90%, 49% 88%,
    /* nose */
    50% 84.5%, 51.5% 80.5%,
    /* eyebrows */
    5% 45%, 95% 45%, 
    15% 38%, 85% 38%,
    /* hair */
    50% 0%,
    0% 0%
    ;
  background-repeat: no-repeat;
}

@property --eyelid {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

/* @keyframes blink {
  0%, 8%, 100% { --init: 40%; }
  4% { --init: 100%; }
} */

@keyframes blink {
  0%, 90%, 94%, 100% { --eyelid: 40%; }
  40% { --eyelid: 52%; }
  41% { --eyelid: 38%; }
  92% { --eyelid: 100%; }
}

div::after {
  --eyelid: 40%;
  animation: blink 5s linear infinite;
  content: "";
  display: block;
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 26%;
  height: 12%;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(ellipse closest-side, transparent 80%, black 0 calc(80% + 0.5vmin), var(--skin) 0),
    radial-gradient(ellipse closest-side, transparent 80%, black 0 calc(80% + 0.5vmin), var(--skin) 0),
    linear-gradient(172deg, var(--skin-shadow-light) var(--eyelid), black 0 calc(var(--eyelid) + 0.5vmin), transparent 0),
    linear-gradient(185deg, var(--skin-shadow-light) var(--eyelid), black 0 calc(var(--eyelid) + 0.5vmin), transparent 0),
    radial-gradient(ellipse closest-side at 50% 55%, black 20%, white 0),
    radial-gradient(ellipse closest-side at 50% 55%, black 20%, white 0);
  background-size: 38% 100%;
  background-position:
    left top, right top;
  background-repeat: no-repeat;
}