<div id="homer" aria-label="Homer Simpson" role="img"></div>
html {
  --bg: #fff;
  background: var(--bg);
}

#homer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vmin;
  height: 80vmin;
  background-repeat: no-repeat;
  background-image:
    /* hair */
    radial-gradient(ellipse 102% 95% at 58.75% 80%, #0000 45%, black 0 49.5%, #0000 0),
    radial-gradient(ellipse 102% 95% at 66.75% 70%, #0000 45%, black 0 49.5%, #0000 0),
    linear-gradient(82deg, #0000 40%, black 0 50%, #0000 0),
    linear-gradient(42deg, #0000 30%, black 0 37%, #0000 0),
    linear-gradient(90deg, #0000 40%, black 0 50%, #0000 0),
    linear-gradient(52deg, #0000 62%, black 0 68%, #0000 0),
    /* pupils */
    radial-gradient(circle at 43.5% 45.5%, black 2%, #0000 0),
    radial-gradient(circle at 64% 41.5%, black 1.75%, #0000 0),
    /* eye 1 */
    radial-gradient(ellipse 54% 51% at 44.5% 45%, white 17%, black 0 18.5%, #0000 0),
    /* nose */
    radial-gradient(ellipse 54% 51% at 0% 74.8%, white 51%, black 0 61%, #0000 0),
    radial-gradient(circle at 150% 500%, white 88.75%, black 0 90.25%, #0000 0),
    radial-gradient(circle at -85% -510%, #f000 89.88%, black 0 90.75%, #0000 0),
    /* smile */
    radial-gradient(circle at 110% 60%, #0000 50%, black 0 65%, #0000 0),
    /* eye 2 */
    radial-gradient(ellipse 50% 47% at 60.5% 42%, white 17%, black 0 18.5%, #0000 0),
    /* neck */
    radial-gradient(circle at -350% 120%, #0000 79.5%, #000 0 80.25%, #0000 0 92%, #0000 0),
    radial-gradient(circle at 350% -90%, #0000 85%, #000 0 88%, #0000 0 92%, #0000 0),
    /* mouth */
    radial-gradient(circle at 40% -500%, #0000 90.5%, #000 0 92%, #0000 0 92%, #0000 0),
    radial-gradient(circle at -30% 112%, #0000 59%, #000 0 62.5%, #0000 0),
    radial-gradient(circle at -40% 20%, #0000 52%, #000 0 63%, #0000 0),
    radial-gradient(circle at 0% 52%, white 35%, #000 0 45%, #0000 0),
    /* chin */
    linear-gradient(var(--bg), var(--bg)),
    radial-gradient(ellipse 62% 57% at 53% 71%, #0000 24%, black 0 25.5%, #0000 0),
    /* ear */
    radial-gradient(ellipse 50% 55% at 75% 50%, #0000 75%, black 0 90%, #0000 0),
    radial-gradient(circle at 50% 110%, #0000 50%, black 0 65%, #0000 0),
    radial-gradient(circle at 110% 40%, #0000 50%, black 0 65%, #0000 0),
    /* eyebrow */
    radial-gradient(circle at -20% 84%, #0000 55%, black 0 65%, #0000 0),
    /* cheek */
    radial-gradient(circle at -10% 50%, #0000 55%, black 0 65%, #0000 0)
    ;
  background-size:
    /* hair */
    18% 23%,
    17% 20%,
    8% 8%,
    8% 8%,
    8% 9%,
    8% 8%,
    /* pupils */
    100% 100%,
    100% 100%,
    /* eye 1 */
    100% 100%,
    /* nose */
    15% 15%,
    10% 10%,
    14.5% 15%,
    /* smile */
    3.5% 3.5%,
    /* eye 2 */
    100% 100%,
    /* neck */
    25% 18%,
    10% 10%,
    /* mouth */
    34% 10%,
    15% 12.5%,
    5% 5%,
    5% 12%,
    /* chin */
    40% 23%,
    100% 100%,
    /* ear */
    10% 10%,
    3.5% 3.5%,
    3.5% 2.5%,
    /* eyebrow */
    5.5% 7%,
    /* cheek */
    5.5% 7%
    ;
  background-position:
    /* hair */
    31% -1%,
    23.5% 7%,
    24% 56%,
    26.9% 52.6%,
    29.25% 52.25%,
    30% 51.75%,
    /* pupils */
    0 0,
    0 0,
    /* eye 1 */
    0 0,
    /* nose */
    72.75% 46%,
    58% 47.25%,
    58.88% 57%,
    /* smile */
    41.5% 72.5%,
    /* eye 2 */
    0 0,
    /* neck */
    43% 83%,
    70% 89%,
    /* mouth */
    63% 73%,
    76% 59%,
    70% 75.5%,
    78% 69%,
    /* chin */
    84% 69.5%,
    0 0,
    /* ear */
    28% 65%,
    31.5% 63.5%,
    31.75% 64.5%,
    /* eyebrow */
    66% 30.75%,
    /* cheek */
    69.5% 51%
    ;
}

#homer::before {
  content: "";
  box-sizing: border-box;
  border: 0.8vmin solid;
  position: absolute;
  top: 12%;
  left: 21%;
  width: 43%;
  height: 42%;
  border-radius: 100% / 90% 85% 95% 0%;
  transform: rotate(-25deg);
  background: transparent;
  clip-path: polygon(0% 0%, 100% 0%, 100% 63%, 0% 96%);
  box-shadow: inset -2vmin 1vmin 0 -1vmin white;
  box-shadow: inset -2vmin 1vmin 0 -1vmin var(--bg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.