vielle.dev
+21
-9
src/components/blog/background/Moon.astro
+21
-9
src/components/blog/background/Moon.astro
···
2
2
import { blog } from "@/config";
3
3
import { Moon as LunarPhaseJS } from "lunarphase-js";
4
4
5
-
// sorry south hemisphere, theres fuck all i can do without getting ur location which is weird </3
5
+
// sorry south hemisphere, theres fuck all i can do without getting ur location which is creepy </3
6
+
const phase = LunarPhaseJS.lunarAgePercent();
6
7
---
7
8
8
9
<style>
···
21
22
id="moon"
22
23
width="100"
23
24
height="100"
24
-
style={`--parallax-speed: ${blog.background.parallax.moon};
25
-
--phase: ${LunarPhaseJS.lunarAgePercent()};`}
25
+
style={`--parallax-speed: ${blog.background.parallax.moon}`}
26
26
data-parallax
27
27
>
28
28
<defs>
29
29
<clipPath id="shadow">
30
-
<rect x="50" y="0" width="50" height="100"></rect>
30
+
<rect x={phase < 0.5 ? "0" : "100"} y="0" width="100" height="200"></rect>
31
31
</clipPath>
32
32
</defs>
33
33
34
-
<circle style="fill:#ffffff" cx="50" cy="50" r="50"></circle>
35
-
<circle style="fill:#000000" cx="50" cy="50" r="50" clip-path="url(#shadow)"
36
-
></circle>
37
-
<ellipse style="fill:#000000" cx="50" cy="50" rx="25" ry="50"></ellipse>
38
-
</svg>
34
+
<!-- base -->
35
+
<circle style="fill:#ffffff" cx="100" cy="100" r="100"></circle>
36
+
<!-- half shadow -->
37
+
<circle
38
+
style="fill:#000000"
39
+
cx="100"
40
+
cy="100"
41
+
r="100"
42
+
clip-path="url(#shadow)"></circle>
43
+
<!-- rotation shadow bulge thing -->
44
+
<ellipse
45
+
style={`fill: #${phase < 0.25 || phase > 0.75 ? "000000" : "ffffff"}`}
46
+
cx="100"
47
+
cy="100"
48
+
rx={50 * Math.cos(4 * Math.PI * phase) + 50}
49
+
ry="100"></ellipse>
50
+
</svg>