JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<div class="background">
  <div class="circle">

  </div>
</div>

CSS

body, html {
  width: 100%;
  height: 100%;
}

.background {
  background-image: url('http://www.bravotango.ca/assets/name-game-alphabet-wall-1920x1080.jpg');
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
}
    
.circle {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(500px at 50% 50%, rgba(0, 141, 85, 0) 0, rgba(0, 141, 85, 1) 0);
}

JavaScript

var internal = 0;
var interval2 = 0;
function updateGradient() {
  if (internal >= 400) {
		clearInterval(animateRadial);
  }
	$('.circle').css({
  	"background-image": "radial-gradient(500px at 50% 50%, rgba(0, 141, 85, 0) " + interval2 + "px, rgba(0, 141, 85, 1) " + internal + "px)"
  })
  internal += 2 * 2 * 2;
  interval2 = internal * 0.85;
}

var animateRadial = setInterval(updateGradient, 10);