JSFiddle - React, Tailwind, and code Playground

JavaScript

var cv = document.createElement("canvas");
document.body.appendChild(cv);
cv.width= 256;
cv.height=256;
var ctx = cv.getContext("2d");

var start = Date.now();

function anim() {
var t = (Date.now()-start)*0.00001;

for(var y=0;y<256;y++)
for(var x=0;x<256;x++)
{
    var u= x-128;
    var v= y-128;

    //some dot-product thingies
	var fov = 256;
    var ray = u*u + v*v + fov*fov;
    
    //raytrace big inner-sphere
    var t1 = (6 * fov / ray*Math.cos(t*10.01+y*0.001-t));
    //raytrace small outer-sphere
    var t2 = ( 3 * fov - Math.sqrt( 9*fov*fov - ray*8 ) ) / ray;
    //pick closest
	if( t2 < t1 ) t1 = t2;
    
    u *= t1+t*1;
	v *= t1+t*1;
    
    //store (u*256 &256) and (v*256&255) somewhere or
    ctx.fillStyle = '#0' 
        + (u*32&15).toString(16)
    	+ (v*32&15).toString(16);
    ctx.fillRect(x,y,1,1);
}

}

setInterval(anim,16);