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

Animated Loading Page

Animated Weather Card

HTML Animated Login Form Example

HTML

CSS

JS

Recommended

Animated Loading Page

Animated Weather Card

HTML Animated Login Form Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS