Skip to content

Commit 3f2b4ba

Browse files
actions-useractions-user
committed
(CI) Run Prettier
1 parent 02e6168 commit 3f2b4ba

2 files changed

Lines changed: 135 additions & 54 deletions

File tree

‎Art/Shira-Sultan-dark-orbit/index.html‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,35 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width,initial-scale=1" />
6-
<title>Neon Orbit — Animation</title>
7-
<link rel="stylesheet" href="styles.css">
8-
</head>
9-
<body>
10-
<main class="stage" aria-label="Neon orbit animation">
11-
<div class="core"></div>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<title>Neon Orbit — Animation</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<main class="stage" aria-label="Neon orbit animation">
11+
<div class="core"></div>
1212

13-
<div class="orbit orbit--1"><div class="satellite"></div></div>
14-
<div class="orbit orbit--2"><div class="satellite"></div></div>
15-
<div class="orbit orbit--3"><div class="satellite"></div></div>
13+
<div class="orbit orbit--1"><div class="satellite"></div></div>
14+
<div class="orbit orbit--2"><div class="satellite"></div></div>
15+
<div class="orbit orbit--3"><div class="satellite"></div></div>
1616

17-
<svg class="glow-filter" width="0" height="0" xmlns="http://www.w3.org/2000/svg">
18-
<defs>
19-
<filter id="softGlow">
20-
<feGaussianBlur stdDeviation="6" result="b" />
21-
<feMerge>
22-
<feMergeNode in="b" />
23-
<feMergeNode in="SourceGraphic" />
24-
</feMerge>
25-
</filter>
26-
</defs>
27-
</svg>
28-
</main>
29-
</body>
17+
<svg
18+
class="glow-filter"
19+
width="0"
20+
height="0"
21+
xmlns="http://www.w3.org/2000/svg"
22+
>
23+
<defs>
24+
<filter id="softGlow">
25+
<feGaussianBlur stdDeviation="6" result="b" />
26+
<feMerge>
27+
<feMergeNode in="b" />
28+
<feMergeNode in="SourceGraphic" />
29+
</feMerge>
30+
</filter>
31+
</defs>
32+
</svg>
33+
</main>
34+
</body>
3035
</html>

‎Art/Shira-Sultan-dark-orbit/styles.css‎

Lines changed: 104 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,27 @@
66
--accent3: #00ffa2;
77
}
88

9-
* { box-sizing: border-box }
10-
html, body { height: 100% }
9+
* {
10+
box-sizing: border-box;
11+
}
12+
html,
13+
body {
14+
height: 100%;
15+
}
1116

1217
body {
1318
margin: 0;
14-
background: radial-gradient(1200px 600px at 10% 10%, rgba(0,157,255,0.06), transparent 8%),
15-
radial-gradient(900px 400px at 90% 90%, rgba(159,0,255,0.06), transparent 6%),
16-
var(--bg);
19+
background: radial-gradient(
20+
1200px 600px at 10% 10%,
21+
rgba(0, 157, 255, 0.06),
22+
transparent 8%
23+
),
24+
radial-gradient(
25+
900px 400px at 90% 90%,
26+
rgba(159, 0, 255, 0.06),
27+
transparent 6%
28+
),
29+
var(--bg);
1730
display: grid;
1831
place-items: center;
1932
font-family: Inter, system-ui, Arial;
@@ -29,8 +42,13 @@ body {
2942
overflow: hidden;
3043
display: grid;
3144
place-items: center;
32-
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
33-
box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
45+
background: linear-gradient(
46+
180deg,
47+
rgba(255, 255, 255, 0.02),
48+
rgba(255, 255, 255, 0.01)
49+
);
50+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6),
51+
inset 0 1px 0 rgba(255, 255, 255, 0.02);
3452
backdrop-filter: blur(4px);
3553
}
3654

@@ -40,16 +58,34 @@ body {
4058
width: 36px;
4159
height: 36px;
4260
border-radius: 50%;
43-
background: radial-gradient(circle at 35% 30%, #fff, var(--core) 40%, rgba(255,228,139,0.08) 70%);
44-
box-shadow: 0 0 30px rgba(255,228,139,0.6), 0 0 80px rgba(255,228,139,0.12);
61+
background: radial-gradient(
62+
circle at 35% 30%,
63+
#fff,
64+
var(--core) 40%,
65+
rgba(255, 228, 139, 0.08) 70%
66+
);
67+
box-shadow: 0 0 30px rgba(255, 228, 139, 0.6),
68+
0 0 80px rgba(255, 228, 139, 0.12);
4569
animation: pulse 3s linear infinite;
4670
z-index: 6;
4771
}
4872

4973
@keyframes pulse {
50-
0% { transform: scale(1); box-shadow: 0 0 30px rgba(255,228,139,0.5), 0 0 80px rgba(255,228,139,0.15); }
51-
50% { transform: scale(1.08); box-shadow: 0 0 50px rgba(255,228,139,0.9), 0 0 130px rgba(255,228,139,0.3); }
52-
100% { transform: scale(1); box-shadow: 0 0 30px rgba(255,228,139,0.5), 0 0 80px rgba(255,228,139,0.15); }
74+
0% {
75+
transform: scale(1);
76+
box-shadow: 0 0 30px rgba(255, 228, 139, 0.5),
77+
0 0 80px rgba(255, 228, 139, 0.15);
78+
}
79+
50% {
80+
transform: scale(1.08);
81+
box-shadow: 0 0 50px rgba(255, 228, 139, 0.9),
82+
0 0 130px rgba(255, 228, 139, 0.3);
83+
}
84+
100% {
85+
transform: scale(1);
86+
box-shadow: 0 0 30px rgba(255, 228, 139, 0.5),
87+
0 0 80px rgba(255, 228, 139, 0.15);
88+
}
5389
}
5490

5591
.orbit {
@@ -68,44 +104,84 @@ body {
68104
left: 100%;
69105
transform: translate(-50%, -50%);
70106
border-radius: 50%;
71-
background: conic-gradient(from 120deg, var(--accent1), var(--accent2), var(--accent3));
72-
box-shadow: 0 0 20px rgba(0,157,255,0.9), 0 0 6px rgba(159,0,255,0.6);
107+
background: conic-gradient(
108+
from 120deg,
109+
var(--accent1),
110+
var(--accent2),
111+
var(--accent3)
112+
);
113+
box-shadow: 0 0 20px rgba(0, 157, 255, 0.9), 0 0 6px rgba(159, 0, 255, 0.6);
73114
filter: blur(0.6px);
74115
mix-blend-mode: screen;
75116
}
76117

77118
/* מסלולים */
78-
.orbit--1 { width:160px; height:160px; animation: spin 6s linear infinite; }
79-
.orbit--1 .satellite { width:14px; height:14px; }
119+
.orbit--1 {
120+
width: 160px;
121+
height: 160px;
122+
animation: spin 6s linear infinite;
123+
}
124+
.orbit--1 .satellite {
125+
width: 14px;
126+
height: 14px;
127+
}
80128

81-
.orbit--2 { width:260px; height:260px; animation: spin 10s linear infinite reverse; }
82-
.orbit--2 .satellite { width:18px; height:18px; }
129+
.orbit--2 {
130+
width: 260px;
131+
height: 260px;
132+
animation: spin 10s linear infinite reverse;
133+
}
134+
.orbit--2 .satellite {
135+
width: 18px;
136+
height: 18px;
137+
}
83138

84-
.orbit--3 { width:370px; height:370px; animation: spin 18s linear infinite; }
85-
.orbit--3 .satellite { width:22px; height:22px; }
139+
.orbit--3 {
140+
width: 370px;
141+
height: 370px;
142+
animation: spin 18s linear infinite;
143+
}
144+
.orbit--3 .satellite {
145+
width: 22px;
146+
height: 22px;
147+
}
86148

87149
.orbit::before {
88-
content: "";
150+
content: '';
89151
position: absolute;
90152
inset: 0;
91153
border-radius: 50%;
92-
background: radial-gradient(closest-side, transparent 70%, rgba(255,255,255,0.02)),
93-
conic-gradient(from 0deg, transparent 40%, rgba(255,110,240,0.03));
154+
background: radial-gradient(
155+
closest-side,
156+
transparent 70%,
157+
rgba(255, 255, 255, 0.02)
158+
),
159+
conic-gradient(from 0deg, transparent 40%, rgba(255, 110, 240, 0.03));
94160
transform: translateZ(0);
95161
pointer-events: none;
96162
}
97163

98164
/* סיבוב חלק ואינסופי */
99165
@keyframes spin {
100-
0% { transform: translate(-50%, -50%) rotate(0deg); }
101-
100% { transform: translate(-50%, -50%) rotate(360deg); }
166+
0% {
167+
transform: translate(-50%, -50%) rotate(0deg);
168+
}
169+
100% {
170+
transform: translate(-50%, -50%) rotate(360deg);
171+
}
102172
}
103173

104174
@media (prefers-reduced-motion: reduce) {
105-
.orbit { animation: none; }
175+
.orbit {
176+
animation: none;
177+
}
106178
}
107179

108180
@media (max-width: 520px) {
109-
.orbit--3 { display: none; }
110-
.stage { border-radius: 14px; }
181+
.orbit--3 {
182+
display: none;
183+
}
184+
.stage {
185+
border-radius: 14px;
186+
}
111187
}

0 commit comments

Comments
 (0)