Анимированное звездное небо v.2

<style>
.particleCanvas {
position:relative;
}
#particleCanvas {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.contact-btn {
transition: background 0.5s, transform 0.5s;

}
.contact-btn:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
border-radius: 20em;
width: 100%;
height: 100%;
background: #333 radial-gradient(farthest-side at 50% 100%, #111, transparent);
opacity: 0.1;
transition: all 0.4s ease-in-out;
}
.contact-btn:after {
content:'';
--border-width: 1px;
--loop-cycle: 24s;
position: absolute;
inset: calc(var(--border-width)* -1);
border-radius: 50px;
border: var(--border-width) solid transparent;
-webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
-webkit-mask-clip: padding-box, border-box;
mask-clip: padding-box, border-box;
-webkit-mask-composite: source-in, xor;
mask-composite: intersect;
pointer-events: none;
}

.contact-btn .tn-atom::after, .contact-btn .tn-atom::before {
content: "";
height: 100%;
offset-anchor: 100% 50%;
background: radial-gradient(circle at 50% 50%, hsla(0, 0%, 100%, 0.75), transparent 50%), radial-gradient(circle at 50% 50%, #c2ccff 50%, transparent);
opacity: 0.4;
offset-path: rect(0 100% 100% 0 round 33px);
position: absolute;
display: inline-block;
-webkit-animation: loop 4s linear infinite;
animation: loop var(--loop-cycle) linear infinite;
aspect-ratio: 1 / 1;
transition: opacity 1s ease-in-out;
}

@keyframes loop {
100% {
offset-distance: 100%;
}
}
</style>

<script>
const canvaspart = document.getElementById('particleCanvas');
const ctxpart = canvaspart.getContext('2d');

// Initial canvas size
canvaspart.width = window.innerWidth;
canvaspart.height = window.innerHeight;

let particles = [];
let particleCount = calculateParticleCount();

class Particle {
constructor() {
this.reset();
this.y = Math.random() * canvaspart.height;
this.fadeDelay = Math.random() * 600 + 100;
this.fadeStart = Date.now() + this.fadeDelay;
this.fadingOut = false;
}

reset() {
this.x = Math.random() * canvaspart.width;
this.y = Math.random() * canvaspart.height;
this.speed = Math.random() / 5 + 0.1;
this.opacity = 1;
this.fadeDelay = Math.random() * 600 + 100;
this.fadeStart = Date.now() + this.fadeDelay;
this.fadingOut = false;
}

update() {
this.y -= this.speed;
if (this.y < 0) {
this.reset();
}

if (!this.fadingOut && Date.now() > this.fadeStart) {
this.fadingOut = true;
}

if (this.fadingOut) {
this.opacity -= 0.008;
if (this.opacity <= 0) {
this.reset();
}
}
}

draw() {
ctxpart.fillStyle = `rgba(${255 - (Math.random() * 255 / 2)}, 255, 255, ${this.opacity})`;
ctxpart.fillRect(this.x, this.y, 0.4, Math.random() * 2 + 1);
}
}

function initParticles() {
particles = [];
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}

function animate() {
ctxpart.clearRect(0, 0, canvaspart.width, canvaspart.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
requestAnimationFrame(animate);
}

function calculateParticleCount() {
return Math.floor((canvaspart.width * canvaspart.height) / 6000);
}

function onResize() {
canvaspart.width = window.innerWidth;
canvaspart.height = window.innerHeight;
particleCount = calculateParticleCount();
initParticles();
}

window.addEventListener('resize', onResize);

initParticles();
animate();

</script>