vielle.dev
[Archived] Archived WIP of vielle.dev
Make sun spinning SVG
+27
-6
src/components/blog/background/Sun.astro
+27
-6
src/components/blog/background/Sun.astro
···
1
1
---
2
-
import { blog } from "@/config";
2
+
import { blog, utils } from "@/config";
3
3
4
4
interface Props {
5
5
percent: number;
6
6
}
7
7
8
8
const { percent } = Astro.props;
9
+
const prongs = Math.round(utils.getRandom(blog.background.sun.prongs));
9
10
---
10
11
11
12
<style>
12
-
img {
13
+
svg {
13
14
position: absolute;
14
15
border-radius: 100%;
15
16
top: 15rem;
16
17
left: calc(100lvw * var(--sun-progress-percent) - 7.5rem);
17
18
z-index: -1;
18
19
20
+
animation:
21
+
1ms alternate scroll,
22
+
normal 120s infinite linear spin !important;
23
+
animation-timeline: scroll(), auto !important;
19
24
}
20
25
</style>
21
26
22
-
<img
27
+
<svg
23
28
id="sun"
24
-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/BBSO_full-disk_H-alpha_2002-07-26_153931_color.png/250px-BBSO_full-disk_H-alpha_2002-07-26_153931_color.png"
25
-
alt=""
29
+
width="300"
30
+
height="300"
31
+
viewBox="0 0 100 100"
26
32
style={`--parallax-speed: ${blog.background.parallax.sun};
27
33
--sun-progress-percent: ${percent}`}
28
34
data-parallax
29
-
/>
35
+
>
36
+
<circle style="fill:#ffff00" cx="50" cy="50" r="35"></circle>
37
+
38
+
{
39
+
new Array(prongs)
40
+
.fill(0)
41
+
.map((_, i) => (
42
+
<polygon
43
+
fill="#ffff00"
44
+
points="50 0, 55 10, 45 10"
45
+
transform={`rotate(${(i / prongs) * 360})`}
46
+
transform-origin="center"
47
+
/>
48
+
))
49
+
}
50
+
</svg>
+6
-1
src/config.ts
+6
-1
src/config.ts
···
14
14
moon: 20,
15
15
star: [0, 5],
16
16
},
17
+
17
18
clouds: {
18
19
count: 8,
19
20
width: [40, 80],
···
27
28
prongs: [4, 8],
28
29
rotateSpeed: [20, 40],
29
30
},
31
+
32
+
sun: {
33
+
prongs: [10, 20],
34
+
},
30
35
},
31
36
} as const;
32
37
···
35
40
variance: [number, number] | readonly [number, number],
36
41
seed?: number
37
42
) {
38
-
return variance[0] + (seed ?? Math.random()) * variance[1] - variance[0];
43
+
return variance[0] + (seed ?? Math.random()) * (variance[1] - variance[0]);
39
44
},
40
45
};