Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Happy New Year 2025</title>
<style type=”text/css”>
body{
margin: 0;
overflow: hidden;
background: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.container{
position: relative;
text-align: center;
z-index: 1;
height: 100%;
width: 100%;
}
.new-year-text{
font-size: 3.5rem;
font-weight: bold;
color: gold;
text-shadow: 0 0 10px gold,
0 0 20px orange,
0 0 30px red;
animation: glow 2s infinite alternate;
z-index: 1000;
position: relative;
top: 40%;
}
@keyframes glow {
from{
text-shadow: 0 0 10px gold,
0 0 20px orange,
0 0 30px red;
}
to{
text-shadow: 0 0 20px gold,
0 0 30px red,
0 0 40px yellow;
}
}
canvas{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
</style>
</head>
<body>
<div class=”container”>
<h1 class=”new-year-text”>
Happy New Year 2025
</h1>
<canvas id=”fireworks”></canvas>
</div>
<script type=”text/javascript”>
const canvas =
document.getElementById(‘fireworks’);
const ctx = canvas.getContext(‘2d’);
canvas.width= window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
const fireworks = [];
class Particle {
constructor(x, y, color, size,
velocityX, velocityY) {
this.x = x;
this.y = y;
this.color = color;
this.size = size;
this.velocityX = velocityX;
this.velocityY = velocityY;
this.alpha = 1;
}
draw(){
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y,
this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
update(){
this.x += this.velocityX;
this.y += this.velocityY;
this.alpha -= 0.01;
}
}
class Firework{
constructor(x, y) {
this.x = x;
this.y = canvas.height;
this.targetY = y;
this.color = `hsl(${Math.random(
) * 360}, 100%, 50%)`;
this.exploded = false;
}
draw(){
if(!this.exploded){
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0,
Math.PI * 2);
ctx.fill();
}
}
update(){
if(!this.exploded){
this.y -=5;
if(this.y <= this.targetY){
this.exploded = true;
this.explode();
}
}
}
explode() {
for (let i = 0; i < 50; i++) {
const angle = Math.random() *
Math.PI * 2;
const speed = Math.random() *
3 + 1;
particles.push(new Particle(
this.x,
this.y,
this.color,
Math.random() * 3 + 1,
Math.cos(angle) * speed,
Math.sin(angle) * speed));
}
}
}
function createFirework() {
const x = Math.random() * canvas.width;
const y = Math.random() *
(canvas.height / 2);
fireworks.push(new Firework(x, y));
}
function animate() {
ctx.fillStyle = ‘rgba(0,0,0,0.2)’;
ctx.fillRect(0,0, canvas.width,
canvas.height);
for(let i = particles.length – 1;
i >= 0; i–) {
particles[i].draw();
particles[i].update();
if(particles[i].alpha <= 0){
particles.splice(i,1);
}
}
for(let i = fireworks.length – 1;
i>= 0; i–) {
fireworks[i].draw();
fireworks[i].update();
if (fireworks[i].exploded) {
fireworks.splice(i, 1);
}
}
requestAnimationFrame(animate);
}
setInterval(createFirework,800);
animate();
</script>
</body>
</html>
