Animated Experiment 002.js

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var width = 700;
var height = 700;
var mainRadius = 200;
var center = {x: 0, y: height/2};
var points = [];

//create distorted circle
for (var i = 0; i < Math.PI * 2; i += 0.05) {
    var rc = ( 50 * Math.random());
    var xc = (550 * Math.sin(i))  + rc;
    var yc = (550 * Math.cos(i))  + rc;

    points.push([xc, yc]);
}


function rotate(x, y, xm, ym, a) {
    a = a * Math.PI / 180; // Convert to radians because that is what
                           // JavaScript likes
    // Subtract midpoints, so that midpoint is translated to origin
    // and add it in the end again
    var xr = (x - xm) * Math.cos(a) - (y - ym) * Math.sin(a) + xm;
    var yr = (x - xm) * Math.sin(a) + (y - ym) * Math.cos(a) + ym;
    return [xr, yr];
}

var rotation = 0;

var x = -1 * mainRadius;
var y = -1 * mainRadius;
function draw() {

    x += 0.5;
    y += 0.4;

    var grad = ctx.createRadialGradient(center.x, center.y, 0, center.x, center.y, 3 * Math.abs(x));
    grad.addColorStop(0, "rgba(255,150,150,0.1)");
    grad.addColorStop(1, "rgba(0,50,150,0.1)");

    ctx.strokeStyle = grad;
    ctx.beginPath();

    for (var j = 0; j < points.length; j++) {
        var nx = points[j][0] + x;
        var ny = points[j][1] + y;
        var rotatedPoints = rotate(nx, ny, x, y, rotation);

        rotation += 0.00075;
        ctx.lineTo(rotatedPoints[0], rotatedPoints[1]);
    }

    ctx.closePath();
    ctx.stroke();

    if (x < width + 550 + 50) {
        window.requestAnimationFrame(draw);
    } else {
        console.log('end');
    }
}

window.requestAnimationFrame(draw);