EffectHub.com: your best source for gaming

Recommendation

More Effects...

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

var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

var circles = new Array();
 
function Circle(angle, radius, rRadius, iX, iY) {
    this.angle = angle;
    this.radius = radius;
    this.rRadius = rRadius;
    this.iX = iX;
    this.iY = iY;
    this.inc = 1;
}
 
Circle.prototype.add = function () {
    this.angle += this.inc;
    this.cX = this.iX + this.rRadius * Math.cos(this.angle);
    this.cY = this.iY + this.rRadius * Math.sin(this.angle);
     
    if (this.angle >= (Math.PI * 2)) {
        this.angle = 0;
        this.inc = .01 + Math.random() * .1;
    }

var rColor = 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ', .3)';

ctx.beginPath();
ctx.arc(this.cX, this.cY, this.radius, 0, Math.PI * 2);
    ctx.closePath();
    
ctx.fillStyle = rColor;
    ctx.fill();
ctx.strokeStyle = rColor;
    ctx.stroke();

};

function drawCC() {

for (var i = 0; i < 30 ; i++) {

for (var j = 0; j < 50+Math.random() * 200 ; j++) {
    
        var iX = canvasWidth / 2;
        var iY = canvasHeight / 3;

var radius = i;
        var rRadius = 30*i;
    
        var angle =100+i;

var circle = new Circle(angle, radius, rRadius, iX, iY);
        circles.push(circle);
        
    }
}
     
    
    requestAnimationFrame(draw);
}
drawCC();
 
function draw() {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
     
    for (var i = 0; i < circles.length; i++) {
        var circle = circles[i];
        circle.add();
    }
     
    
    requestAnimationFrame(draw);
}

CSS

HTML

Recommendation

Join Effecthub.com