<simpson>
  <crane><f></f></crane>
  <eyes></eyes>
  <nose></nose>
  <mouth>
    <m1></m1>
    <m2></m2>
    <m3></m3>
  </mouth>
  <neck></neck>
  <ear></ear>
  <bubble>A challenge to draw a snack?! What a silly idea.<br> We "donut" draw snacks, we eat them!<small>Do not = donut (I am a genius, Hé Hé Hé... )</small></bubble>
</simpson>

simpson {
  --c: #fdd421;
  --m: #d3af7c;

  width: 500px;
  aspect-ratio: 1;
  position: relative;
  translate: 0 6%;
  z-index: 0;
}
crane {
  position: absolute;
  width: 45%;
  height: 44%;
  background: var(--c);
  left: 34%;
  top: 8%;
  border-radius: 50% 44% 0 0/44% 44% 0 0;
  rotate: 18deg;
  border: 3px solid;
  border-bottom: 0;
  transform-style: preserve-3d;
}
crane:before,
crane:after {
  content: "";
  position: absolute;
  left: 20%;
  top: -16%;
  width: 52%;
  aspect-ratio: 2;
  border: 3px solid;
  border-radius: 50% 50% 0 0 / 100% 90% 0 0;
  border-bottom: 0;
  rotate: y -1deg;
  transform: rotate(6deg);
}
crane:after {
  left: 41%;
  top: -14%;
  transform: rotate(19deg);
}
crane f:before {
  content: "";
  position: absolute;
  width: 9%;
  height: 21%;
  border: 3px solid;
  border-right: 0;
  background: var(--c);
  top: 64%;
  left: -8%;
  border-radius: 100% 0 0 100% / 50%;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
}
crane f:after {
  content: "";
  position: absolute;
  width: 30%;
  height: 28%;
  background: #000;
  top: 71%;
  right: -13%;
  clip-path: polygon(
    0 100%,
    16% 0,
    50% 86%,
    82% 0,
    100% 100%,
    95% 100%,
    81% 17%,
    50% 100%,
    18% 17%,
    5% 100%
  );
}
eyes:before,
eyes:after {
  content: "";
  position: absolute;
  width: 23%;
  height: 22%;
  background: radial-gradient(
        206% 93% at 37% 60%,
        #0000 19.5%,
        #000 20% 21%,
        var(--c) 21.5%
      )
      50% 50% / 200% 200%,
    radial-gradient(circle at 57% 51%, #000 10%, #0000 11%), #fff;
  border-radius: 50%;
  top: 35%;
  left: 41%;
  border: 3px solid;
  border-top-width: 1px;
  clip-path: polygon(0 -3%, 100% 13%, 100% 100%, 0 100%);
  animation: b1 3s infinite alternate;
}
eyes:before {
  left: 25%;
  top: 34%;
  background: radial-gradient(
        206% 93% at 37% 60%,
        #0000 19.5%,
        #000 20% 21%,
        var(--c) 21.5%
      )
      50% 53% / 200% 200%,
    radial-gradient(circle at 40% 48%, #000 9%, #0000 10%), #fff;
  width: 21%;
  animation-name: b2;
}
@keyframes b1 {
  0%,
  93% {
    background-position: 50% 50%;
  }
  98%,
  100% {
    background-position: 50% -15%;
  }
}
@keyframes b2 {
  0%,
  93% {
    background-position: 50% 53%;
  }
  98%,
  100% {
    background-position: 50% -15%;
  }
}

eyes:after {
  z-index: 2;
}
nose {
  position: absolute;
  width: 18%;
  height: 10.5%;
  background: var(--c);
  border: 3px solid;
  top: 49%;
  left: 27%;
  border-radius: 50px 0 0 50px;
  border-bottom: 3px solid;
  border-right: 0;
}
mouth m1 {
  position: absolute;
  width: 23%;
  height: 33%;
  background: var(--m);
  top: 59%;
  left: 40%;
  border-radius: 0 90% 90% 0 / 50%;
  border: 3px solid;
  border-left: 0;
  box-shadow: 0 0 0 200px var(--c);
  clip-path: inset(-15% -22% -34% 8%);
}
mouth m1:before {
  content: "";
  position: absolute;
  width: 65%;
  height: 29%;
  background: var(--m);
  border: 3px solid;
  bottom: 0%;
  left: -9%;
  border-radius: 0 0 77% 99%;
  border-top: 0;
  box-shadow: 1px 15px var(--c);
  clip-path: inset(0 26% -35% 0);
}
mouth m2:before {
  content: "";
  position: absolute;
  width: 25%;
  height: 19%;
  background: var(--m);
  border-left: 3px solid;
  border-top: 3px solid;
  top: 55%;
  left: 23%;
  border-radius: 77px 0 0 0;
  z-index: -1;
}
mouth m2:after {
  content: "";
  position: absolute;
  width: 30%;
  height: 11%;
  background: var(--m);
  border: 3px solid;
  top: 69%;
  left: 21%;
  border-radius: 50px 0 90% 100%;
  clip-path: inset(13% 5% 0 0);
}
mouth m3:before {
  content: "";
  position: absolute;
  width: 12%;
  height: 13%;
  background: var(--m);
  border: 3px solid;
  bottom: 8.8%;
  left: 35%;
  border-radius: 0 0 0 87%;
  z-index: -1;
}
mouth m3:after {
  content: "";
  position: absolute;
  width: 8%;
  height: 6%;
  background: var(--m);
  border: 3px solid;
  left: 32%;
  bottom: 15.5%;
  border-radius: 0 0 0 80%;
  z-index: -1;
  clip-path: inset(0 46% 0 0);
}
neck:before {
  content: "";
  position: absolute;
  width: 9%;
  height: 43%;
  border-left: 3px solid;
  border-top: 3px solid #0000;
  border-bottom: 3px solid #0000;
  box-shadow: 0 0 0 18px var(--c);
  top: 54%;
  left: 68%;
  border-radius: 61% 0 0 33%;
  z-index: -1;
  clip-path: inset(3% 0 0 -25%);
}
neck:after {
  content: "";
  position: absolute;
  height: 29%;
  width: 10%;
  border-right: 3px solid;
  border-radius: 0 20% 59% 0;
  bottom: -4%;
  left: 28%;
  z-index: -2;
  box-shadow: 0 0 0 47px var(--c);
  clip-path: inset(0 -106% 0 2%);
}
ear {
  position: absolute;
  width: 10%;
  height: 12%;
  background: var(--c);
  border: 3px solid;
  top: 58%;
  right: 26%;
  border-radius: 50%;
  border-left: 0;
  clip-path: inset(0 0 0 9%);
}
ear:before {
  content: "";
  position: absolute;
  width: 48%;
  height: 45%;
  border: 3px solid;
  border-radius: 50%;
  top: 33%;
  left: 29%;
  border-bottom: 0;
  clip-path: inset(0 0 25% 0);
  transform: rotate(21deg);
}
ear:after {
  content: "";
  position: absolute;
  height: 31%;
  width: 40%;
  border-left: 3px solid;
  border-top: 2px solid;
  left: 34%;
  top: 19%;
  border-radius: 98% 0 0 0;
  transform: rotate(6deg);
}

simpson:before {
  content: "";
  position: absolute;
  width: 18%;
  height: 18%;
  right: 35%;
  top: 65%;
  border-radius: 50%;
  background: var(--m);
  z-index: 4;
  border: 3px solid;
  clip-path: polygon(0 48%, 47% 0, 100% 0, 100% 100%, 0% 78%);
}
simpson:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 22%;
  height: 15%;
  --g: radial-gradient(#903b0d 68%, #0000 71%) no-repeat;
  background: var(--g) 40% 52% / 6% 5%, var(--g) 59% 53% / 5% 3%,
    var(--g) 70% 57% / 5% 4%, var(--g) 70% 82% / 5% 4%, var(--g) 56% 83% / 3% 3%,
    var(--g) 85% 87% / 5% 4%, var(--g) 84% 77% / 5% 4%, var(--g) 45% 80% / 2% 4%,
    var(--g) 50% 60% / 2% 4%, var(--g) 92% 51% / 3% 4%;
  top: 69%;
  left: 25%;
}

bubble {
  background: #f2f2f2;
  font-family: system-ui, sans-serif;
  width: 240px;
  padding: 15px;
  font-weight: bold;
  font-size: 17px;
  border-radius: 34px;
  z-index: 1;
  position: absolute;
  left: -6%;
  top: -3%;
  filter: drop-shadow(1px 1px 2px black);
}
bubble:before {
  content: "";
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  background: inherit;
  border-radius: 50%;
  top: 38%;
  right: -9%;
  z-index: -1;
}
bubble::after {
  content: "";
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  background: inherit;
  border-radius: 50%;
  top: 62%;
  right: -20%;
  z-index: -1;
  box-shadow: 23px 25px 0 -5px #f2f2f2;
}
bubble small {
  display: block;
  margin-top: 13px;
  font-size: 10px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: end center;
  background: #375c98;
  overflow: hidden;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}