body {
	/* essential styling */
	--c0: #ff9800;
	--c1: #3c3c3c;
	background: radial-gradient(circle, 
		var(--gc0, var(--c0)) var(--stop, 0%), 
		var(--gc1, var(--c1)) 0);
	background-size: 100vw 100vh
}

body:after {
  /* just to prettify stuff */
  /* use absolute positioning because 
   * margin: 0 on body 
   * breaks Edge for some reason */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font: calc(16vmin + 3rem)/100vh Leckerli One, cursive;
  text-align: center;
  cursor: pointer;
  content: 'Click!';
}

@supports (mix-blend-mode: screen) {
  body:after {
    			/* in supports because 
     		 	 * background: inherit 
    		 	 * breaks Edge for some reason 
    		 	 * (sorry, I had no better idea) */
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: invert(1) grayscale(1) contrast(3);
  }
}
const NF = 50, 
			S = document.body.style;

let rID = null, f = 0, typ = 0;

function stopAni() {
  cancelAnimationFrame(rID);
  rID = null;  
};

function update() {
	let k = ++f/NF;
  
  S.setProperty('--stop', `${+(k*100).toFixed(2)}%`);
  
  if(!(f%NF)) {
		f = 0;
		S.setProperty('--gc1', `var(--c${typ})`);
		typ = 1 - typ;
		S.setProperty('--gc0', `var(--c${typ})`);
		S.setProperty('--stop', `0%`);
    stopAni();
    return;
  }
  
  rID = requestAnimationFrame(update);
};

addEventListener('click', e => {
  if(!rID) update();
}, false);
View Compiled
Rerun