Animated Dots Background

Open In Editor Publish Your Code

class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 5 + 1;
                this.speedX = Math.random() * 3 - 1.5;
                this.speedY = Math.random() * 3 - 1.5;
            }
            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                
                if (this.size > 0.2) this.size -= 0.1;
            }
            draw() {
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

function init() {
            for (let i = 0; i < 100; i++) {
                particlesArray.push(new Particle());
            }
        }

init();
        animate();

window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            init();
        });

Animated Dots Background

Recommended

CSS Animated Login Form Design

Animated Link Hover

Animated Login Form

HTML

CSS

JS

Recommended

CSS Animated Login Form Design

Animated Link Hover

Animated Login Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS