<div role="img" aria-label="cartoon of a barrel with the toxic sign on it and a glowing substance inside and dripping outside"></div>

<a id="youtube" href="https://www.youtube.com/watch?v=fitjMV2bmA4" target="_blank">
  See how this drawing was made
</a>

html {
  background: #677;
}

@property --light {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}

@property --color {
  syntax: '<color>';
  inherits: false;
  initial-value: #0f0;
}

@keyframes light {
  0%, 100% { 
    --color: #0f0;
    --light: 50%;
  }
  50% {
    --color: #8f0;
    --light: 70%;
  }
}

div {
  --color: #0f0;
  --light: 50%;
  width: 40vmin;
  height: 20vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-80%, 80%);
  background-image:
    radial-gradient(var(--color) 50%, transparent 50%),
    radial-gradient(var(--color) 50%, transparent 50%)
    ;
  background-position:
    5% 20%,
    20% 10%
    ;
  background-size:
    50% 50%,
    20% 40%
    ;
  background-repeat: no-repeat;
  animation: light 2s infinite;
  filter: drop-shadow(0.5vmin 0.5vmin) drop-shadow(-0.25vmin 0vmin) drop-shadow(0.25vmin -0.33vmin);
}

div::before {
  --color: #fd3;
  content: "";
  display: block;
  position: absolute;
  top: -35vmin;
  left: 10vmin;
  width: 30vmin;
  height: 45vmin;
  background: var(--color);
  border-radius: 100% / 20%;
  box-shadow:
    inset 0 -8vmin var(--color),
    inset 0 -8.25vmin #222,
    inset 0 -8.75vmin var(--color),
    inset 0 -9vmin #222,
    -0.5vmin 0.5vmin;
  background-image:
    radial-gradient(circle, #222 10%, var(--color) 0 15%, transparent 0 60%, var(--color) 0 65%, #222 0 70%, var(--color) 0),
    repeating-conic-gradient(#222 0 30deg, transparent 0 90deg, #222 0 120deg);
  background-position:
    center center;
  background-size: 10vmin 10vmin, 9vmin 9vmin;
  background-repeat: no-repeat;
}



div::after {
  --light: 50%;
  --color: #0f0;
  content: "";
  display: block;
  position: absolute;
  top: -34.5vmin;
  left: 10.5vmin;
  width: 29vmin;
  height: 8vmin;
  background-color: #222;
  border-radius: 50%;
/*   background-image: radial-gradient(ellipse 100% 100% at 50% 120%, var(--color) 50%, #222 0 54%, var(--color) 55%, transparent var(--light)); */
  background-image: radial-gradient(ellipse 100% 100% at 50% 120%, var(--color) 50%, transparent var(--light));
  animation: light 2s infinite;
  box-shadow: inset 0 -0.5vmin
}


/***/

#youtube {
  z-index: 2;
  display: block;
  width: 100px;
  height: 70px;
  position: absolute;
  bottom: 30px;
  right: 30px;
  background: red;
  border-radius: 50% / 11%;
  transition: transform 0.5s;
  font-size: 0;
  color: black;
  filter: drop-shadow(0.5vmin 0.5vmin) drop-shadow(-0.5vmin 0vmin) drop-shadow(0.25vmin -0.33vmin);
}

#youtube:hover,
#youtube:focus {
  transform: scale(1.1);
}

#youtube::before {
  content: "";
  display: block;
  position: absolute;
  top: 7.5%;
  left: -6%;
  width: 112%;
  height: 85%;
  background: red;
  border-radius: 9% / 50%;
}

#youtube::after {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: 40px;
  width: 45px;
  height: 30px;
  border: 15px solid transparent;
  box-sizing: border-box;
  border-left: 30px solid white;
}