html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Created By : Riya
Created On : 31-Mar-2025
And huge thanks to Joy bro for helping-->
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eid Wish Animation</title>
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Pacifico&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="eid-container">
<h1 class="eid-text" id="eidText"></h1>
<p class="name-text" id="nameText"></p>
</div>
<div id="circleContainer"></div>
<div class="wish-box" id="wishBox" onclick="generateWish()">Click Me</div>
<p class="wish-text" id="wishText"></p>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
background: radial-gradient(circle, #003366, #1a1a1a, #242124);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
position: relative;
overflow: hidden;
width: 100vw;
padding: 50px 10px 0;
box-sizing: border-box;
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
.eid-container {
text-align: center;
margin-bottom: 30px;
}
.space {
display: inline-block;
width: 10px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
onload = () => {
const darkSwalTheme = {
customClass: {
popup: 'swal2-dark-popup',
title: 'swal2-dark-title',
htmlContainer: 'swal2-dark-html-container',
confirmButton: 'swal2-dark-confirm',
input: 'swal2-dark-input'
}
};
const state = {
userName: 'Dear Friend',
currentWishIndex: 0
};
const config = {
batchSize: 3,
wishDelay: 4000,
circles: [
{
size: 80,
color: '#ff4500',
top: '5%',
left: '10%',
duration: '5s'
},
{
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run