Skip to content

Commit 9694a89

Browse files
aayush105aayush105
authored
Merge pull request #749 from angelagarwal2/master
Added “Radial Color Pulsar” – A Pure CSS Spinning Light Art
2 parents 5237bf1 + 0718259 commit 9694a89

File tree

5 files changed

+111
-0
lines changed

5 files changed

+111
-0
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
8080
- [Pendulum](#pendulum)
8181
- [Playing Card Animation](#playing-card-animation)
8282
- [Profile Cards](#profilecards)
83+
- [Radial Color Pulsar](#RadialPulsar)
8384
- [Responsive Counter Showing # of Items That Didn't Fit Screen](#responsive-counter-showing--of-items-that-didnt-fit-screen)
8485
- [Ripple Effect](#ripple-effect)
8586
- [Scary Animation](#scary-animation)
@@ -915,6 +916,14 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
915916

916917
---
917918

919+
## <a id="RadialPulsar"></a>Radial Color Puslar
920+
921+
[<img src="Radial Color Pulsar/Radial.png" title="Demo">](<[https://codepen.io/eduardoboucas/pen/BNyKwO](https://codepen.io/Aman-Pathan-the-typescripter/pen/MWLYNNx)>)
922+
923+
**[⬆ back to top](#quick-links)**
924+
925+
---
926+
918927
## <a id="Pendulum"></a>Pendulum
919928

920929
![img_source](images/pendulum.png)

‎Radial Color Pulsar/Radial.png‎

989 KB
Loading

‎Radial Color Pulsar/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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>Pure CSS Color Pulsar</title>
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
</head>
9+
<body>
10+
<div class="pulsar-stage" tabindex="0">
11+
<div class="layer"></div>
12+
<div class="layer"></div>
13+
<div class="layer"></div>
14+
</div>
15+
<div class="info">
16+
Pure CSS Color Pulsar: **Hover over the center** to see the effect accelerate!
17+
</div>
18+
</body>
19+
</html>

‎Radial Color Pulsar/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
:root {
2+
--bg-dark: #000000;
3+
--size: 600px;
4+
--blue: #00ffff;
5+
--pink: #ff00ff;
6+
--yellow: #ffff00;
7+
--base-duration: 25s;
8+
}
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
body {
15+
height: 100vh;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
background-color: var(--bg-dark);
20+
overflow: hidden;
21+
user-select: none;
22+
}
23+
.pulsar-stage {
24+
width: var(--size);
25+
height: var(--size);
26+
position: relative;
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
border-radius: 50%;
31+
cursor: pointer;
32+
box-shadow: 0 0 100px rgba(255, 255, 255, 0.1) inset, 0 0 20px rgba(0, 0, 0, 0.8);
33+
background-color: var(--bg-dark);
34+
}
35+
.pulsar-stage:hover .layer {
36+
animation-duration: calc(var(--base-duration) / 8);
37+
filter: brightness(1.5);
38+
}
39+
.layer {
40+
position: absolute;
41+
width: 100%;
42+
height: 100%;
43+
border-radius: 50%;
44+
mix-blend-mode: screen;
45+
animation: rotateA var(--base-duration) linear infinite;
46+
}
47+
.layer:nth-child(1) {
48+
background: radial-gradient(circle at 70% 30%, var(--blue) 0%, transparent 40%);
49+
animation-name: rotateB;
50+
animation-duration: calc(var(--base-duration) * 1.5);
51+
}
52+
.layer:nth-child(2) {
53+
background: radial-gradient(circle at 30% 60%, var(--pink) 0%, transparent 40%);
54+
animation-duration: var(--base-duration);
55+
animation-delay: -5s;
56+
}
57+
.layer:nth-child(3) {
58+
background: radial-gradient(circle at 50% 50%, var(--yellow) 0%, transparent 35%);
59+
animation-duration: calc(var(--base-duration) / 2);
60+
animation-delay: -10s;
61+
}
62+
@keyframes rotateA {
63+
from { transform: rotate(0deg); }
64+
to { transform: rotate(360deg); }
65+
}
66+
@keyframes rotateB {
67+
from { transform: rotate(0deg); }
68+
to { transform: rotate(-360deg); }
69+
}
70+
.info {
71+
position: absolute;
72+
bottom: 20px;
73+
color: white;
74+
font-family: sans-serif;
75+
font-size: 1em;
76+
padding: 10px 20px;
77+
background: rgba(255, 255, 255, 0.1);
78+
border-radius: 8px;
79+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
80+
pointer-events: none;
81+
z-index: 10;
82+
}

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -390,6 +390,7 @@ <h1><a href="https://github.com/you-dont-need/You-Dont-Need-JavaScript"><div cla
390390
<a href="./Shuffling squares/shuffling.html">Shuffling Squares</a>
391391
<a href="./Square Animation/index.html">Square Animation</a>
392392
<a href="./Square_Rotation_Animation/squareAnimation.html">Square Rotation Animation</a>
393+
<a href="./Radial Color Pulsar/index.html">Radial Color Pulsar</a>
393394
</td>
394395
</tr>
395396
<tr>

0 commit comments

Comments
 (0)