<article class="free" role="img" aria-label="A man with a table full of unhealthy food asks for a sugar-free soda"></article>
.free {
  --skin: #eba;
  font-size: 1vmin;
  width: 90em;
  height: 70em;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    /* table */
    linear-gradient(#a00 0 0) 29% 84% / 55% 25%,
    repeating-linear-gradient(90deg, #a00 0 0.5%, #0000 0 1%) 29% 86% / 55% 25%,
    radial-gradient(50% 800% at 50% 250%, #fff 99.99%, #0000 0) 25% 65% / 63% 3%,
    conic-gradient(at 10% 250%, #0000 10deg, #642 0 12deg, #0000 0) 0 100% / 50% 35%,
    conic-gradient(at 90% 250%, #0000 348deg, #642 0 350deg, #0000 0) 60% 100% / 50% 35%,
    /* ice cream */
    radial-gradient(farthest-side at 50% 0, #999 99.99%, #0000 0) 64% 57% / 9% 5%,
    radial-gradient(circle at 64.5% 54%, hotpink 3%, #0000 0),
    radial-gradient(circle at 61% 54%, #ffa 3%, #0000 0),
    radial-gradient(circle at 62.5% 51%, brown 3%, #0000 0),
    linear-gradient(#999 0 0) 63.125% 64% / 1% 10%,
    linear-gradient(#999 0 0) 63.4% 64% / 4% 2.5%,
    /* cheese */
    conic-gradient(at 50% 2000%, #aaa 15deg, #0000 0 345deg, #aaa 0) 12% 62.5% / 20% 1.5%,
    radial-gradient(circle at 17% 58%, #fc5 0.75%, #0000 0),
    radial-gradient(circle at 21.5% 59%, #fc5 0.5%, #0000 0),
    radial-gradient(circle at 20% 60%, #fc5 1%, #0000 0),
    linear-gradient(#fe5 0 0) 16% 60% / 9% 7%,
    /* chicken */
    conic-gradient(at 50% 1700%, #aaa 15deg, #0000 0 345deg, #aaa 0) 40% 62.5% / 20% 2.5%,
    radial-gradient(farthest-side at 0 60%, #963 99.99%, #0000 0) 46.5% 59% / 7% 10%,
    radial-gradient(farthest-side at 100% 60%, #963 99.99%, #0000 0) 37.5% 59% / 10% 10%,
    /* bottle */
    radial-gradient(circle at 54.075% 46.5%, #383 4.33%, #0000 0),
    linear-gradient(#8335 0 0) 54.25% 58% / 5% 10%,
    linear-gradient(#383 0 0) 54.25% 56% / 6% 17%,
    linear-gradient(#383 0 0) 54.275% 50% / 2% 20%,
    linear-gradient(#383 0 0) 54.25% 40% / 3% 1%,
    /* legs */
    linear-gradient(#369 0 0) 27% 95% / 6% 10%,
    linear-gradient(#369 0 0) 37% 95% / 6% 10%,
    radial-gradient(at 28.5% 100%, #000 4%, #0000 0),
    radial-gradient(at 37.5% 100%, #000 4%, #0000 0),
    radial-gradient(farthest-side at 0% 100%, #000 99.99%, #0000 0) 41% 100% / 5% 5%,
    /* chair */
    linear-gradient(#963 0 0) 23.5% 100% / 2% 15%,
    linear-gradient(#963 0 0) 42% 100% / 2% 15%,
    /* hand */
    conic-gradient(at 50% 0, #0000 170deg, #999 0 190deg, #0000 0) 24% 51% / 1% 4%,
    conic-gradient(at 50% 0, #0000 170deg, #999 0 190deg, #0000 0) 25% 51% / 1% 4%,
    conic-gradient(at 50% 0, #0000 170deg, #999 0 190deg, #0000 0) 26% 51% / 1% 4%,
    radial-gradient(farthest-side at 50% 0, #999 99.99%, #0000 0) 24.5% 54% / 3% 2%,
    linear-gradient(#999 0 0) 25% 57% / 1% 4%,
    radial-gradient(circle at 25% 62%, var(--skin) 3.5%, #0000 0),
    /* neck */
    linear-gradient(#da9 0 0) 31.5% 44% / 4% 10%,
    /* body */
    radial-gradient(50% 100% at 50% 100%, #fff 99.99%, #0000 0) 28% 61% / 20% 20%,
    /* bubble link */
    conic-gradient(#0000 40deg, #fc8 0 49deg, #0000 0) 27% 22% / 50% 30%,
    /* base */
    radial-gradient(farthest-side at 50% 50%, #d3c7e999 99.99%, #0000 0) 10% 50% / 90% 90%,
    #f000;
  background-repeat: no-repeat;
}

.free::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotate(-25deg);
  background: 
    /* chicken leg */
    radial-gradient(circle at 52% 52%, #ffe 1.5%, #0000 0),
    radial-gradient(circle at 52% 54%, #ffe 1.5%, #0000 0),
    linear-gradient(#ffe 0 0) 50.5% 53% / 3.5% 2%,
    radial-gradient(70% 60% at 45% 53%, #852 6%, #0000 0),
    /* hair */
    radial-gradient(circle at 38% 19%, #c93 2%, #0000 0),
    radial-gradient(circle at 40% 19.25%, #c93 1.5%, #0000 0),
    radial-gradient(circle at 36% 19.5%, #c93 1.66%, #0000 0),
    radial-gradient(circle at 34.5% 20.75%, #c93 1.25%, #0000 0),
    /* face */
    radial-gradient(farthest-side at 50% 20%, #000 99.99%, #0000 0) 36.5% 27% / 2% 1.25%,
    radial-gradient(farthest-side at 50% 20%, #000 99.99%, #0000 0) 40.5% 27.25% / 2% 1.25%,
    conic-gradient(at 30% 50%, #0000 270deg, #c006 0 330deg, #0000 0) 41.5% 31% / 6% 7%,
    radial-gradient(circle at 38% 35%, #000 0.75%, #0000 0),
    radial-gradient(30% 50% at 38% 28%, var(--skin) 20%, #0000 0),
    #f000;
  background-repeat: no-repeat;
}

.free::after {
  content: "...and a sugar-free soda, please!";
  font: 3em Arial;
  white-space: pre-wrap;
  text-align: center;
  position: absolute;
  left: 60%;
  top: 5%;
  width: 30%;
  background: #fc8;
  padding: 1em;
  border-radius: 50%;
  transform: translateX(-50%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.