<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%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.