new3

Python Expert January 08, 2026

Greetings, everyone, and a very joyous Diwali to you all!

Diwali, the festival of lights, is a time to share happiness and illuminate our lives with hope and positivity. To help you celebrate, we're going to create a beautiful "Diwali Wishes" digital greeting card featuring a glowing Diya with a mesmerizing flickering flame and a magical sparkling background.

This project is a wonderful way to send your warm wishes digitally, and it's built using the classic web trio: HTML, CSS, and JavaScript.

Source code :-

We've organized this project into three separate files for clean and easy-to-understand code.

HTML

The HTML file sets up the basic structure of our greeting card. It includes a container for the Diya, the festive text, and a <canvas> element which our JavaScript will use to create the sparkling background effect.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Diwali!</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@700&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<canvas id="sparkles-canvas"></canvas>
<div class="diwali-card">
<div class="diya">
<div class="flame"></div>
<div class="diya-base"></div>
</div>
<div class="message">
<h1>Happy Diwali</h1>
<p>May the festival of lights fill your life with joy, happiness, and prosperity.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS :

This file contains all the styling and is responsible for the beautiful visual effects. It creates the shape of the Diya and its flame, and most importantly, the mesmerizing flickering and glowing animations using @keyframes.

:root {
--bg-color: #0c0028;
--flame-color-1: #ffac2c;
--flame-color-2: #ff7100;
--glow-color: rgba(255, 165, 0, 0.5);
--text-color: #fff;
--diya-color: #e88d2a;
}
body {
margin: 0;
height: 100vh;
background: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-family: 'Playfair Display', serif;
}
#sparkles-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.diwali-card {
position: relative;
z-index: 2;
text-align: center;
padding: 2rem;
}
.diya {
position: relative;
width: 150px;
height: 100px;
margin: 0 auto 20px;
}
.diya-base {
width: 150px;
height: 60px;
background: var(--diya-color);
border-radius: 0 0 75px 75px;
position: absolute;
bottom: 0;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.diya-base::before {
content: '';
position: absolute;
top: 0;
left: 25px;
width: 100px;
height: 20px;
background: #c57620;
border-radius: 50%;
}
.flame {
width: 20px;
height: 50px;
background-color: var(--flame-color-1);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position: absolute;
bottom: 50px;
left: 50%;
transform-origin: 50% 90%;
transform: translateX(-50%);
box-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--glow-color), 0 0 45px var(--glow-color);
animation: flicker 1.5s ease-in-out infinite;
}
@keyframes flicker {
0%, 100% {
transform: translateX(-50%) scaleY(1) scaleX(1);
opacity: 1;
}
50% {
transform: translateX(-50%) scaleY(0.95) scaleX(1.05);
opacity: 0.8;
}
}
.message {
color: var(--text-color);
}
.message h1 {
font-family: 'Tangerine', cursive;
font-size: 5rem;
margin: 0;
text-shadow: 0 0 10px var(--glow-color);
}
.message p {
font-size: 1.2rem;
max-width: 400px;
margin: 10px auto 0;
line-height: 1.6;
}

JavaScript:

The JavaScript file is dedicated to creating the gentle, sparkling background effect using the HTML5 Canvas. It generates a collection of particles that float around the screen, creating a magical atmosphere.

const canvas = document.getElementById('sparkles-canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particlesArray;
// Particle class
class Particle {
constructor(x, y, size, color, speedX, speedY) {
this.x = x;
this.y = y;
this.size = size;
this.color = color;
this.speedX = speedX;
this.speedY = speedY;
this.opacity = 1;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.2) this.size -= 0.01;
if (this.opacity > 0) this.opacity -= 0.005;
}
draw() {
ctx.fillStyle = `rgba(255, 215, 0, ${this.opacity})`; // Gold color
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// Create particle array
function init() {
particlesArray = [];
let numberOfParticles = 100;
for (let i = 0; i < numberOfParticles; i++) {
let size = Math.random() * 2 + 1;
let x = Math.random() * canvas.width;
let y = Math.random() * canvas.height;
let speedX = (Math.random() * 0.4) - 0.2;
let speedY = (Math.random() * 0.4) - 0.2;
let color = 'gold';
particlesArray.push(new Particle(x, y, size, color, speedX, speedY));
}
}
// Animation loop
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particlesArray.length; i++) {
particlesArray[i].update();
particlesArray[i].draw();
// Reset particle when it becomes invisible
if (particlesArray[i].opacity <= 0) {
particlesArray[i].x = Math.random() * canvas.width;
particlesArray[i].y = Math.random() * canvas.height;
particlesArray[i].size = Math.random() * 2 + 1;
particlesArray[i].opacity = 1;
}
}
requestAnimationFrame(animate);
}
init();
animate();
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
init();
});

And there you have it—a beautiful and heartfelt digital Diwali greeting! This project is a wonderful way to practice CSS animations and delve into the basics of the HTML5 Canvas API. It shows how different web technologies can come together to create something truly special and festive.

Wishing you and your family a very Happy and Prosperous Diwali!

If your project has problems, don’t worry. Just use this source code and face your coding challenges with excitement. Have fun coding!

Python Expert

Posted by Python Expert

Post a Comment

0 Comments