<div class="cauldron">
    <div class="cauldron-top"></div>
    <div class="fire">
      <div class="fire-red"></div>
      <div class="fire-orange"></div>
      <div class="fire-yellow"></div>
    </div>
    <div class="cauldron-bottom"></div>
  </div>

//******************************************************

// Like it if you like it :) Thank you 

//******************************************************

body{
  background: black;
  padding:0;
  margin:0;
  height:100vh;
  display: grid;
  place-items: center;
}

.cauldron {
  display:block;
  border:1px solid black;
  width: 60px;
  height: 30px;
  border-radius: 0 0 100% 100%;
  position: relative;
  background: linear-gradient(to top, #0f2027, #203a43, #2c5364); 
  transform: scale(1.4);
  
  .cauldron-top {
    width: 60px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    bottom: 24px;
    right: -1px;
    border: 1px solid black;
    background-image: radial-gradient(circle, yellow, orange, black);
    box-shadow: 0px -35px 77px 41px darkorange;
  }
  
  .cauldron-bottom {
    width: 20px;
    height: 5px;
    background: linear-gradient(to top, #0f2027, #203a43, #2c5364);
    position: absolute;
    bottom: -6px;
    right: 20px;
  }
  
  .fire{
    display:block;
    width: 60px;
    height: 60px;
    position: relative;
    top: -68px;
    right: -2px;
    
    .fire-red {   
      background-color: #eb4511;
      background-image: linear-gradient(315deg, #eb4511 0%, #b02e0c 74%);
      display: block;
      position:absolute;
      height:70px;
      width: 60px;
      clip-path: polygon(55% 34%, 79% 57%, 95% 78%, 79% 100%, 21% 100%, 9% 78%, 23% 57%);
      transition-timing-function: ease-out;
      animation: pulse1 .5s infinite;
      box-shadow: -9px -52px 72px 21px rgba(255,203,47,0.37);
    }
    
     @keyframes pulse1 {
          0% {
            clip-path: polygon(55% 34%, 79% 57%, 95% 78%, 79% 100%, 21% 100%, 9% 78%, 23% 57%);
          }
          50% {
            clip-path: polygon(56% 25%, 79% 54%, 94% 72%, 79% 100%, 21% 100%, 9% 74%, 23% 55%);
          }
          100% {
            clip-path: polygon(57% 0, 83% 41%, 94% 67%, 79% 100%, 21% 100%, 8% 64%, 24% 45%);
          }
      }
    
    .fire-orange {
      bottom: -10px;
      background-color: #f5d020;
      background-image: linear-gradient(315deg, #f5d020 0%, #f53803 74%);
      position: absolute;
      display: block;
      height:50px;
      width:60px;
      clip-path: polygon(41% 45%, 65% 65%, 78% 80%, 70% 100%, 27% 100%, 14% 78%, 25% 65%);
      transition-timing-function: ease-out;
      animation: pulse2 .3s infinite;
    }
    
     @keyframes pulse2 {
         0% {
            clip-path: polygon(41% 45%, 65% 65%, 78% 80%, 70% 100%, 27% 100%, 14% 78%, 25% 65%);
          }
         50% {
            clip-path: polygon(45% 33%, 66% 56%, 79% 71%, 70% 100%, 27% 100%, 15% 74%, 23% 58%);
          }
          100% {
            clip-path: polygon(47% 24%, 68% 51%, 80% 65%, 70% 100%, 27% 100%, 15% 71%, 23% 53%);
          }
      }
    
     .fire-yellow {
      bottom: -10px;
      position: absolute;
      background-color: #ef5734;
      background-image: linear-gradient(315deg, #ef5734 0%, #ffcc2f 74%);
      display: block;
      height:40px;
      width:60px;
      clip-path: polygon(81% 56%, 80% 73%, 80% 88%, 64% 100%, 36% 100%, 27% 83%, 37% 71%);
      transition-timing-function: ease-out;
      animation: pulse3 1s infinite;
    }
    
    @keyframes pulse3 {
          0% {
            clip-path: polygon(47% 52%, 66% 67%, 73% 83%, 64% 100%, 36% 100%, 28% 85%, 34% 69%);
          }
         50% {
            clip-path: polygon(54% 45%, 66% 65%, 72% 84%, 64% 100%, 36% 100%, 31% 85%, 33% 68%);
          }
          100% {
            clip-path: polygon(44% 43%, 61% 60%, 72% 82%, 64% 100%, 36% 100%, 29% 88%, 33% 70%);
          }
      }
    
  
  }

}