JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="256", height="256">
    IE8 must die!      
</canvas>

JavaScript

'use strict';
var c = document.getElementById('c').getContext('2d');
// preparing grid
c.fillStyle = '#EEFFEE';
c.fillRect(0,0,255,255);
function r() {
    return Math.floor((Math.random()*256))
}
for(var i=0;i<512;i+=8) {
    c.strokeStyle = 'rgb('+r()+','+r()+','+r()+')';
    c.strokeRect(0,0,512-i,i);
}
// get byte streams
var d = c.getImageData(0,0,256,256);
var n = c.getImageData(0,0,256,256);
// copy pixel between streams
function copy(x1,y1,x2,y2) {
    var o1 = (Math.floor(x1)+Math.floor(y1)*256)*4; 
    var o2 = (Math.floor(x2)+Math.floor(y2)*256)*4;
    for(var i=0;i<4;i++) n.data[o2+i] = d.data[o1+i];
}
// spherize!
for(var y=0;y<256;y++) {
    for(var x=0;x<256;x++) {
        var xx = x;
        var yy = y;
        var dx = x-128;
        var dy = y-128;
        var r = Math.sqrt(dx*dx+dy*dy);
        if (r<128) {
            var a = Math.atan2(dy,dx);
            var k = Math.sin((128-r)/128*Math.PI/2);
            xx = 128+Math.cos(a)*r/(k+1);
            yy = 128+Math.sin(a)*r/(k+1);
        }
        copy(xx,yy,x,y);
    }
}
c.putImageData(n,0,0);