<article class="burger" role="img" aria-label="Cartoon of a running burger"></article>
.burger {
  --bread: #ea7;
  --cheese: gold;
  font-size: 0.5vmin;
  width: 80em;
  height: 80em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    /* face */
    radial-gradient(circle at 54.5% 39.25%, #fff 0.35em, #0000 0),
    radial-gradient(circle at 62.5% 39.25%, #fff 0.35em, #0000 0),
    radial-gradient(circle at 55% 40%, #000 1.25em, #0000 0),
    radial-gradient(circle at 63% 40%, #000 1.25em, #0000 0),
    radial-gradient(100% 50% at 53% 41.5%, #f003 2.5%, #0000 0),
    radial-gradient(100% 50% at 65% 41.5%, #f003 2.5%, #0000 0),
    radial-gradient(farthest-side at 50% 0, #0000 70%, #000 0 99.9%, #0000 0) 59.5% 42.5% / 4% 2%,
    /* front arm */
    radial-gradient(farthest-side at 100% 40%, #0000 90%, #000 0 99.99%, #0000 0) 25% 59% / 13% 10%,
    radial-gradient(circle at 35% 62.5%, #000 1.5%, #0000 0),
    /* top bread */
    radial-gradient(100% 50% at 53% 21.5%, wheat 1.5%, #0000 0),
    radial-gradient(100% 50% at 44% 20.2%, wheat 1.5%, #0000 0),
    radial-gradient(100% 50% at 63% 21%, wheat 1.5%, #0000 0),
    radial-gradient(100% 50% at 57% 19%, wheat 1.5%, #0000 0),
    radial-gradient(100% 50% at 49% 18%, wheat 1.5%, #0000 0),
    radial-gradient(100% 50% at 37% 21%, wheat 1.5%, #0000 0),
    radial-gradient(100% 50% at 41% 17.5%, wheat 1.5%, #0000 0),
    radial-gradient(farthest-side at 50% 100%, var(--bread) 99.5%, #0000 99.9%) 50% 20% / 80% 20%,
    radial-gradient(farthest-side at 50% 0%, var(--bread) 99.5%, #0000 99.9%) 50% 39.85% / 80% 10%,
    /* cheese */
    conic-gradient(var(--cheese) 77deg, #0000 0 285deg, var(--cheese) 0) 20% 50% / 90% 20%,
    conic-gradient(var(--cheese) 76.6deg, #0000 0 285.5deg, var(--cheese) 0) 20% 50.65% / 90% 21%,
    conic-gradient(at 50% 30%, #0000 0 99deg, var(--cheese) 0 259.5deg, #0000 0) 20% 33.4% / 90% 10%,
    /* patty: beef? veggie? who knows? */
    radial-gradient(100% 50% at 41% 53%, #0004 1.5%, #0000 0),
    radial-gradient(circle at 61% 51%, #0004 1.5%, #0000 0),
    radial-gradient(60% 60% at 71% 48%, #0004 1.5%, #0000 0),
    radial-gradient(50% 50% at 81% 52%, #0004 1.45%, #0000 0),
    radial-gradient(110% 80% at 31% 47%, #0004 1.35%, #0000 0),
    radial-gradient(80% 30% at 21% 53%, #0004 1.15%, #0000 0),
    radial-gradient(90% 40% at 15% 45%, #0004 1.25%, #0000 0),
    
    radial-gradient(50% 90% at 50% 50%, maroon 99%, #0000 0) 50% 45% / 80% 20%,
    radial-gradient(farthest-side, maroon 99%, #0000 99.9%) 50% 56% / 66% 6%,
    /* lettuce */
    radial-gradient(farthest-side, #0b0, green 98%, #0000 99%) 50% 60% / 50% 5%,
    radial-gradient(farthest-side, green 98%, #0000 99%) 30% 60% / 35% 7%,
    radial-gradient(farthest-side, #0b0, green 98%, #0000 99%) 18% 57% / 35% 6%,
    radial-gradient(farthest-side, green 98%, #0000 99%) 30% 60% / 35% 7%,
    radial-gradient(farthest-side, #0b0, green 98%, #0000 99%) 80% 58% / 45% 5.5%,
    /* tomato */
    radial-gradient(farthest-side, tomato 98%, #0000 99%) 50% 60% / 70% 9%,
    /* bread bottom */
    radial-gradient(50% 140% at 50% 90%, var(--bread) 98%, #0000 99%) 50% 60% / 72% 20%,
    radial-gradient(50% 50% at 50% 30%, var(--bread) 98%, #0000 99%) 50% 72% / 71.75% 10%,
    /* legs */
    radial-gradient(farthest-side at -35% 135%, #0000 92.5%, #000 0 99.9%, #0000 0) 65% 81% / 13% 13%,
    /* arm */
    radial-gradient(farthest-side at 0 0, #0000 90%, #000 0 99.99%, #0000 0) 95% 50% / 13% 10%,
    radial-gradient(circle at 95% 45%, #000 1.5%, #0000 0),
    /* speed lines */
    radial-gradient(100% 70% at 140% 45%, #0000 90%, #000 0 99%, #0000 0) 6% 45% / 3% 10%,
    radial-gradient(100% 70% at 140% 45%, #0000 90%, #000 0 99%, #0000 0) 4.5% 45% / 3% 9%,
    radial-gradient(100% 70% at 140% 45%, #0000 90%, #000 0 99%, #0000 0) 3% 45% / 3% 8%,
    radial-gradient(100% 70% at 140% 50%, #0000 90%, #000 0 99%, #0000 0) 29% 87% / 3% 10%,
    radial-gradient(100% 70% at 140% 50%, #0000 90%, #000 0 99%, #0000 0) 27.5% 87% / 3% 9%,
    radial-gradient(100% 70% at 140% 50%, #0000 90%, #000 0 99%, #0000 0) 26% 87% / 3% 8%;
  background-repeat: no-repeat;
}

.burger::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(farthest-side at 50% 100%, #000 99%, #0000 0) 46% 88% / 10% 3%;
  background-repeat: no-repeat;
  transform: rotate(-40deg);
}

.burger::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(farthest-side at 35% 35%, #0000 80%, #000 0 99.9%, #0000 0) 45% 81% / 10% 10%,
    radial-gradient(farthest-side at 0 50%, #000 99%, #0000 0) 41% 89% / 3% 10%;
  background-repeat: no-repeat;
  transform: rotate(10deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.