Skip to content

Commit 2ba8d88

Browse files
MohitSingh250MohitSingh250
authored
Echo Nebula (#3246)
1 parent bfa75e9 commit 2ba8d88

3 files changed

Lines changed: 101 additions & 0 deletions

File tree

‎Art/MohitSingh250-Echo Nebula/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Echo Nebula</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="nebula">
11+
<div class="wave w1"></div>
12+
<div class="wave w2"></div>
13+
<div class="wave w3"></div>
14+
<div class="wave w4"></div>
15+
<div class="wave w5"></div>
16+
</div>
17+
</body>
18+
</html>

‎Art/MohitSingh250-Echo Nebula/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"githubHandle": "MohitSingh250",
3+
"artName": "Echo Nebula"
4+
}

‎Art/MohitSingh250-Echo Nebula/styles.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
width: 100vw;
10+
background: radial-gradient(circle at center, #010006 0%, #000 100%);
11+
overflow: hidden;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
}
16+
17+
.nebula {
18+
position: relative;
19+
width: 600px;
20+
height: 600px;
21+
filter: blur(30px) contrast(120%);
22+
}
23+
24+
/* Base wave layer */
25+
.wave {
26+
position: absolute;
27+
top: 50%;
28+
left: 50%;
29+
width: 100px;
30+
height: 100px;
31+
transform: translate(-50%, -50%);
32+
border-radius: 50%;
33+
background: conic-gradient(
34+
from 0deg,
35+
rgba(0,255,255,0.8),
36+
rgba(255,0,255,0.6),
37+
rgba(255,255,0,0.6),
38+
rgba(0,255,255,0.8)
39+
);
40+
opacity: 0.7;
41+
mix-blend-mode: screen;
42+
animation: expand 6s ease-in-out infinite;
43+
}
44+
45+
/* Stagger each wave for echo effect */
46+
.w1 { animation-delay: 0s; }
47+
.w2 { animation-delay: 1s; }
48+
.w3 { animation-delay: 2s; }
49+
.w4 { animation-delay: 3s; }
50+
.w5 { animation-delay: 4s; }
51+
52+
/* Expansion, fading and hue rotation */
53+
@keyframes expand {
54+
0% {
55+
transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
56+
opacity: 0.9;
57+
filter: hue-rotate(0deg);
58+
}
59+
50% {
60+
transform: translate(-50%, -50%) scale(2.5) rotate(180deg);
61+
opacity: 0.4;
62+
filter: hue-rotate(120deg);
63+
}
64+
100% {
65+
transform: translate(-50%, -50%) scale(4) rotate(360deg);
66+
opacity: 0;
67+
filter: hue-rotate(240deg);
68+
}
69+
}
70+
71+
/* Add subtle stars background */
72+
body::before {
73+
content: "";
74+
position: absolute;
75+
inset: 0;
76+
background-image: radial-gradient(white 1px, transparent 1px);
77+
background-size: 3px 3px;
78+
opacity: 0.04;
79+
}

0 commit comments

Comments
 (0)