JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="800" height="480"></canvas>

JavaScript

function getColor(x, y){
		var r,g,b,a;
		var c;
		var base =0;
		x-=400;
		y-=240;
		var distance = Math.sqrt((x*x) + (y*y));
		var outerRing =distance-200;
		if(outerRing < 0)
			outerRing = 0;
		outerRing = outerRing*90;		//antialias
		if(outerRing>255 && distance > 220){
			outerRing = 255 - (distance - 220)*90; 	//antialias
			if(outerRing < 0)
				outerRing = 0;
		}
		if(outerRing > 255)
			outerRing = 255;

		
		if(distance < 210){	
			var colorBleeding = distance-125;	
			colorBleeding *=2.6;
			if(colorBleeding < 0 ){
				colorBleeding = 0;
			}
			if(colorBleeding>255){
				colorBleeding = 0;
			}
		}else{
			colorBleeding = 0;
		}
		var brightnessOuterRing = distance-200;
		if(brightnessOuterRing < 0){
			brightnessOuterRing = 0;
		}
		brightnessOuterRing = brightnessOuterRing*16;
		if(brightnessOuterRing>255){
			brightnessOuterRing = (255*2) - brightnessOuterRing; //mirroring
			if(brightnessOuterRing < 0)
				brightnessOuterRing = 0;
		}
		brightnessOuterRing = 0;

		//Blending

		r = g  = b = (colorBleeding + outerRing);
		if(r > 255){
			r = 255;
		}
		if(g > 255){
			g = 255;
		}
		if(b > 255){
			b = 255;
		}
		r=0;
		b=0;

			var color = 'rgba(' + Math.floor(r) + ',' + Math.floor(g)  + ','+ Math.floor(b) +','+255+')';
		
		return color
	}
	function point(x, y, ctx, color){
		ctx.fillStyle= color;
		ctx.fillRect(x,y,1,1);
	}
    function draw() {
		var color;
		var canvas = document.getElementById("canvas");
		if(canvas.getContext){
			var ctx = canvas.getContext("2d");	
			for(var x = 0; x < 800;x++){
				for(var y=0;y < 480;y++){
					color = getColor(x, y);
					point(x,y,ctx,color);
				}
			}
		}
    }
draw();