如何为背景创建鱼眼效果？SVG

var bg = document.getElementById('bg'),
    c = document.getElementById('fish-eye'),
    ctx = c.getContext('2d'),
    bgCtx = bg.getContext('2d'),
    src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%231564e3' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E";

function loadImg(src)
{
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function()
    {
        bgCtx.fillStyle = '#d0f0f9';
        bgCtx.fillRect(0, 0, bg.width, bg.height);

        for(var x = 0; x < bg.width; x += img.width)
            for(var y = 0; y < bg.height; y += img.height)
                bgCtx.drawImage(img, x, y, img.width, img.height);
        
        window.removeEventListener('mousemove', distortion);
        window.removeEventListener('touchmove', distortion);
        window.addEventListener('mousemove', distortion);
        window.addEventListener('touchmove', distortion);
    }
    img.src = src;
}
loadImg(src);

document.getElementById('file').onchange = function(e)
{
    var tgt = e.target || e.srcElement;
    loadImg(URL.createObjectURL(tgt.files[0]));
};

function distortion(e)
{
    var cx = (e.touches ? e.touches[0].clientX : e.clientX),
        cy = (e.touches ? e.touches[0].clientY : e.clientY),
        size = 200,
        zoom = 1;
    
    c.width = c.height = size;
    c.style.left = cx - size / 2 + 'px';
    c.style.top = cy - size / 2 + 'px';
   
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, size, size);
    ctx.drawImage(
        bg, 
        cx - bg.offsetLeft - .5 * size / zoom, 
        cy - bg.offsetTop - .5 * size / zoom,
        size / zoom, size / zoom, 
        0, 0,
        size, size
    );
    
    var imgData = ctx.getImageData(0, 0, size, size),
        pixels = imgData.data,
        pixelsCopy = [],
        index = 0,
        h = size, w = size,
        i = 0;
    
    for(; i <= pixels.length; i+=4)
    {
        pixelsCopy[index] = [pixels[i], pixels[i+1], pixels[i+2], pixels[i+3]];
        index++;
    }
    
    var result = fisheye(pixelsCopy, w, h);
    
    for(i = 0; i < result.length; i++)
    {
        index = 4 * i;

        if(result[i] != undefined)
        {
            pixels[index + 0] = result[i][0];
            pixels[index + 1] = result[i][1];
            pixels[index + 2] = result[i][2]; 
            pixels[index + 3] = result[i][3];
        }
    }
    ctx.putImageData(imgData, 0, 0);
}

function fisheye(srcpixels, w, h)
{
    var dstpixels = srcpixels.slice(),
        y = 0;            
   
    for(; y < h; y++)
    {
        var ny = ((2 * y) / h) - 1,
            ny2 = ny * ny,
            x = 0;

        for(; x < w; x++)
        {                            
            var nx = ((2 * x) / w) - 1,
                nx2 = nx * nx,
                r = Math.sqrt(nx2 + ny2);                

            if(0.0 <= r && r <= 1.0)
            {                            
                var nr = Math.sqrt(1.0-r*r);
                
                nr = (r + (1.0-nr)) / 2.0;

                if(nr <= 1.0)
                {
                    var theta = Math.atan2(ny, nx),
                        nxn = nr * Math.cos(theta),
                        nyn = nr * Math.sin(theta),
                        x2 = parseInt(((nxn + 1) * w) / 2),
                        y2 = parseInt(((nyn + 1) * h) / 2),
                        srcpos = parseInt(y2 * w + x2);
                    
                    if(srcpos >= 0 & srcpos < w * h)
                        dstpixels[parseInt(y * w + x)] = srcpixels[srcpos]
                }
            }
        }
    }
    return dstpixels
} 

body{overflow: hidden; background: #d0f0f9}
canvas,#button{position: absolute}
#c{border-radius: 50%; pointer-events: none}

<canvas id="bg" width="4800" height="4800" style="left:0;top:0"></canvas>
<canvas id="fish-eye"></canvas>

<input type="file" id="file" style="display:none"><br><br>
<input type="button" id="button" value="Выбрать файл..." onclick="document.getElementById('file').click()"  style="left:10px;top:10px">