JSFiddle - React, Tailwind, and code Playground
CSS
canvas{
position:absolute;
top:0;
left:0;
background:mediumseagreen;
}
JavaScript
win = {}
win.width = window.innerWidth;
win.height = window.innerHeight;
win.hw = win.width / 2;
win.hh = win.height / 2;
canvas = document.querySelector("canvas");
canvas.width = win.width;
canvas.height = win.height;
ctx = canvas.getContext("2d");
circles = [];
last = 200;
for (var i = 0; i < 25; i++) {
var x = win.hw;
var y = win.hh;
var e = rand(0.9, 0.95);
var f = color(randInt(190, 215));
var a = rand(.5, .7);
var r = last * rand(.9, .99);
last = r;
var ic = new ImperfectCircle({
x: x,
y: y,
entropy: e,
alpha: a,
r: r,
fill: f
});
circles.push(ic);
}
requestAnimationFrame(drawCircles);
//-- Functions
function drawCircles(t) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0, l = circles.length; i < l; i++) {
var circle = circles[i];
circle.animate(t);
circle.draw();
}
//--
requestAnimationFrame(drawCircles);
}
//-- Classes
function ImperfectCircle(params) {
this.x = params.x;
this.y = params.y;
this.r = params.r;
this.e = params.entropy;
this.q = params.q || 100;
this.a = params.alpha;
this.fill = params.fill;
this.stroke = params.stroke;
this.points = [];
var q = this.q;
var aDiv = 360 / q;
for (var i = 0; i < q; i++) {
var a = toRad(aDiv * i);
var e = rand(this.e, 1);
var x = Math.cos(a) * (this.r * e) + this.x;
var y = Math.sin(a) * (this.r * e) + this.y;
this.points.push({
x: x,
y: y,
initX: x,
initY: y,
angle: a
});
}
}
ImperfectCircle.prototype.draw = function () {
var points = this.points;
var q = this.q;
ctx.beginPath();
for (var i = 0; i < q; i++) {
var p = points[i];
if (i == 0) ctx.moveTo(p.x, p.y);
else ctx.lineTo(p.x, p.y);
}
ctx.closePath();
...