<article class="brew" role="img" aria-label="cartoon of a french press with brewed coffee"></article>

/*  Based on: https://secure.img1-fg.wfcdn.com/im/27140039/resize-h3200-w3200%5Ecompr-r85/5916/59164908/Bodum+Brazil+French+Press+Coffee+Maker.jpg */
.brew {
  --plastic: #222;
  --plastic2: #2a2a2c;
  --plastic3: #38383a;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vmin;
  aspect-ratio: 1;
  background:    
    /* top handle */
    radial-gradient(60% 50%, var(--plastic), #0000 99.99%) 42.5% 8% / 8% 4.4%,
    radial-gradient(50% 100% at 50% 130%, #0000, #ffffff0c 80%, #0000 0) 42.5% 5% / 10% 5%,
    radial-gradient(circle at 43.25% 11.125%, var(--plastic) 4.4%, #0000 0),
    radial-gradient(80% 120% at 50% 130%, #0000, #0003 80%, #0000 0) 43.25% 15% / 6% 2.5%,
    /* top cover */
    linear-gradient(#fff2, #fff0 60%) 39% 15.5% / 39% 4%,
    radial-gradient(farthest-side, var(--plastic) 99%, #0000 99.99%) 39% 15.5% / 39% 4%,
    radial-gradient(farthest-side, #fff 40%, #fff0) 40% 15.75% / 32% 4%,
    linear-gradient(90deg, var(--plastic3), var(--plastic2) 10% 90%, var(--plastic3)) 39% 17.25% / 39% 2%,
    radial-gradient(farthest-side, var(--plastic2) 99%, #0000 99.99%) 39% 17.5% / 39% 4%,
    /* pouring tip */
    radial-gradient(farthest-side at 150% 100%, #fff8 70%, #0002 99%, #0000 99.99%) 20.66% 19.75% / 5% 3.5%,
    radial-gradient(farthest-side at 160% 100%, #fff 90%, #0002 99%, #0000 99.99%) 21% 20.25% / 5% 3%,
    radial-gradient(farthest-side at 100% -00%, #fff 70%, #0002 99%, #0000 99.99%) 20.66% 22.875% / 5% 1.5%,
    radial-gradient(farthest-side at 0 0, #fffc 75%, #fff0) 24.75% 19.75% / 1.5% 6%,
    
    
    /* base front */
    radial-gradient(farthest-side at 0 50%, #0007, #0000) 28% 88% / 15% 19%,
    radial-gradient(farthest-side at 100% 50%, #323c, #0000) 56% 88% / 15% 18%,
    radial-gradient(50% 60% at 50% 0%, #0000 92%, var(--plastic) 0 99.99%, #0000 0) 39% 75% / 39% 6%,
    
    radial-gradient(50% 50% at 50% 0%, #0000 92%, var(--plastic) 0 99.99%, #0000 0) 39% 75% / 39% 6%,
    
    radial-gradient(45% 86% at 50% 0%,#0000 93%, #fff2 0 98%, var(--plastic2) 99.99%) 40.5% 74% / 30% 2%,
    radial-gradient(55% 60% at 50% 0%, #0000 90%, var(--plastic2) 0) 39% 75% / 39% 6%,
    linear-gradient(var(--plastic2) 0 0) 39% 87.5% / 39% 14%,
    /* body */
    linear-gradient(90deg, #0003, #ffe2 7%, #0000, #0001, #18080044 47% 53%, #0001, #0000, #eeeedd18 94%, #0004) 39.25% 50% / 37.5% 65%,
    /* top back */
    radial-gradient(95% 100% at 50% 0, var(--plastic3) 60%, var(--plastic2) 99%, #0000 99.99%) 39.75% 21% / 35.5% 10%,
    radial-gradient(250% 100% at 50% 0, #ddd 40%, #a8aaac 90%, #0000 0) 43.75% 24% / 2% 15%,
    radial-gradient(farthest-side, #e9d5ba 99%, #e9d5ba00 99.99%) 39.5% 33% / 36% 4.5%,
    linear-gradient( #e9d59a 0 0) 39.5% 34.25% / 36% 2%,
    radial-gradient(farthest-side, #e9d59a 99%, #e9d5ba00 99.99%) 39.5% 35% / 36% 4.5%,
    linear-gradient(90deg, #674231, #371201 30%, #321, #371201 70%, #674231) 39.5% 64% / 36% 46%,
    /* base back */
    radial-gradient(farthest-side, var(--plastic) 99%, #0000 99.99%) 39% 72% / 39% 6%,
    radial-gradient(farthest-side, var(--plastic2) 99%, #0000 99.99%) 39% 93% / 39% 9%,
    /* handle */
    radial-gradient(farthest-side at 0 100%, var(--plastic3) 0, var(--plastic) 99.99%, #0000 99.99%)70.5% 16.75% / 19.5% 2.75%,
    radial-gradient(100% 190% at 0 100%, #0000 90%, var(--plastic3) 0, var(--plastic) 99.99%, #0000 99.99%) 70% 19% / 32% 5%,
    radial-gradient(farthest-side at 0 0, #0000 90%, var(--plastic3) 0, var(--plastic) 99.99%, #0000 99.99%) 70% 64% / 32% 65%,
    /* shade */
    radial-gradient(farthest-side, #0007, #0000) 40% 95% / 55% 10%,
    #f000;
  background-repeat: no-repeat;
}