<article class="meaty" role="img" aria-label="Drawing of a cheeseburgers with a variable number of patties depending on the browser viewport"></article>

.meaty {
  width: 300px;
  height: calc(90vh - 200px);
  min-height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:
    /* cheese */
    linear-gradient(gold 7%, #0000 0) 50% 0 / 100% 50px round,
    /* patty */
    radial-gradient(circle, #0002 3%, #0000 0) 50% 0 / 40% 50px round,
    radial-gradient(circle at 30% 16%, #0002 3%, #0000 0) 50% 0 / 44% 50px round,
    radial-gradient(circle at 17% 31%, #0001 3.5%, #0000 0) 50% 0 / 35% 50px round,
    radial-gradient(circle at 45% 76%, #0003 2%, #0000 0) 50% 0 / 27% 50px round,
    radial-gradient(circle at 45% 76%, #0004 2.5%, #0000 0) 40% 0 / 37% 50px round,
    radial-gradient(50% 100% at 50% 50%, brown 99%, #0000 0) 50% 0 / 100% 50px round
    ;
}

.meaty::before {
  content:"";
  position:absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 100%;
  height: 100px;
  background:
    /* top bun */
    radial-gradient(farthest-side, wheat 99.99%, #0000 0) 50% 10% / 3% 3% no-repeat,
    radial-gradient(farthest-side, wheat 99.99%, #0000 0) 40% 15% / 3% 3% no-repeat,
    radial-gradient(farthest-side, wheat 99.99%, #0000 0) 60% 13% / 3% 3% no-repeat,
    radial-gradient(farthest-side, wheat 99.99%, #0000 0) 32% 11% / 3% 3% no-repeat,
    radial-gradient(farthest-side, wheat 99.99%, #0000 0) 43% 4% / 3% 3% no-repeat,
    radial-gradient(farthest-side, wheat 99.99%, #0000 0) 57% 6% / 3% 3% no-repeat,
    radial-gradient(farthest-side, wheat 99.99%, #0000 0) 66% 9% / 3% 3% no-repeat,
    linear-gradient(#ff02, #fff0),
    sandybrown;
  border-radius: 60% 60% 10% 10% / 100% 100% 10% 10%;
}

.meaty::after {
  content:"";
  position:absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 80px;
  background: 
    /* tomato, onion, lettuce, and bottom bun */
    linear-gradient(90deg, red, tomato, red) 50% 0 / 95% 15% no-repeat,
    linear-gradient(90deg, mediumpurple, thistle, mediumpurple) 50% 0 / 90% 30% no-repeat,
    radial-gradient(at 50% 0, forestgreen 40%, #0000 0),
    radial-gradient(50% 20% at 50% 100%, #ffc4, #fff0),
    linear-gradient(#0000 50%, sandybrown 0) 50% 100% / 99% 100% no-repeat,
    radial-gradient(120% 200% at 50% 100%, yellowgreen, forestgreen 50%, #0000 0) 50% 0 / 95% 100% no-repeat;
  border-radius: 2vmin;
}