Fondo de puntos animados

2741 Vijay

Abrir en el editor Video Publica tu código

Recomendado

23 July 2025

Plantilla HTML y CSS para tarjeta de perfil neumórfica

11 January 2024

Un código de Metehan

HTML

CSS

JS

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

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

let particlesArray = [];

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();
        });

Recomendado

Plantilla HTML y CSS para tarjeta de perfil neumórfica

Pantalla de Carga de Puntos

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS