Как создать круглый эффект огня при наведении

const $d = document; 
const canvas = $d.getElementById("canvas"), 
  ctx = canvas.getContext("2d"); 
let main = $d.querySelector(".main"); 
 
function init() { 
  let fire = new Image(); 
  fire.src = 
    "https://image.ibb.co/gcaWJz/image.png"; 
  let w = fire.width, 
    h = fire.height, 
    srcW = fire.width / 4, 
    srcH = fire.height / 7, 
    srcX = 0, 
    srcY = 0, 
    flag = 0, 
    currFrame = 0; 
 
  main.onmouseenter = () => { 
    const interval = setInterval(() => { 
      ++currFrame; 
      if (currFrame == 3) { 
        currFrame = 0; 
        srcX = 0; 
        flag += 1; 
        srcY = srcH * flag; 
        if (flag == 5) { 
          srcY = 0; 
          flag = 0; 
          ctx.clearRect(0, 0, w, h); 
          clearInterval(interval); 
        } 
      } else { 
        srcX = currFrame * srcW; 
        ctx.drawImage(fire, -srcX, -srcY, w, h); 
      } 
    }, 45); 
  }; 
  main.onmouseleave = () => { 
    ctx.clearRect(0, 0, w, h); 
  }; 
} 
 
//init 
init(); 
$d.body.onload = init;

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  height: 100%; 
} 
 
body { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  -ms-flex-direction: column; 
  flex-direction: column; 
  font-family: 'Roboto', sans-serif; 
} 
 
img { 
  width: 100%; 
} 
 
h2 { 
  text-transform: uppercase; 
  margin: 2.5rem; 
  color: #E25822; /*flame color*/ 
  text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.9); 
} 
 
.main { 
  font-size: 0; 
  position: relative; 
  width: 9.375rem; 
  height: 9.375rem; 
  cursor: pointer; 
} 
 
.main:hover .effect img { 
  transition-delay: 500ms; 
  opacity: 1; 
} 
 
.effect img { 
  position: absolute; 
  top: -0.0625rem; 
  left: 0; 
  transition: opacity 300ms; 
  animation-name: rotation; 
  animation-duration: 30000ms; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  opacity: 0; 
} 
 
.effect canvas { 
  width: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
} 
 
@keyframes rotation { 
  from { 
    -webkit-transform: rotate(0deg) scale(0.9); 
    transform: rotate(0deg) scale(0.9); 
  } 
  to { 
    -webkit-transform: rotate(360deg) scale(0.9); 
    transform: rotate(360deg) scale(0.9); 
  } 
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<h2>hover</h2> 
<div class="main"> 
  <img src="https://image.ibb.co/gapib8/good_icon.png" alt="eagle"> 
  <div class="effect"> 
    <img src="https://image.ibb.co/eJCQpT/fire_ring.png" alt="fire"> 
    <canvas id="canvas" width="275" height="275"></canvas> 
  </div> 
</div>

.good { 
  height:200px; 
  width:200px; 
  background-image: url(https://image.ibb.co/gapib8/good_icon.png); 
  background-size:cover; 
  box-sizing:border-box; 
  padding:10px; 
} 
.good .ring { 
  overflow:hidden; 
 
  transition: 1s opacity; 
  transition-timing-function:easeInOut; 
  opacity:0; 
  height:100%; 
  width:100%; 
  background-image: url(https://image.ibb.co/eJCQpT/fire_ring.png); 
  background-repeat:no-repeat; 
  background-size:cover; 
 
 
} 
.good:hover .ring { 
  opacity:1; 
 
}

<div class="good"> 
  <div class="ring"> 
 
  </div> 
</div>