vielle.dev
[Archived] Archived WIP of vielle.dev
1---
2import { blog, utils } from "@/config";
3
4interface Props {
5 percent: number;
6}
7
8const { percent } = Astro.props;
9const prongs = Math.round(utils.getRandom(blog.background.sun.prongs));
10---
11
12<style>
13 svg {
14 position: absolute;
15 border-radius: 100%;
16 top: 150px;
17 left: calc(100lvw * var(--sun-progress-percent) - 75px);
18 z-index: -1;
19
20 animation:
21 1ms alternate scroll,
22 normal 120s infinite linear spin !important;
23 animation-timeline: scroll(), auto !important;
24 }
25</style>
26
27<svg
28 id="sun"
29 width="300"
30 height="300"
31 viewBox="0 0 100 100"
32 style={`--parallax-speed: ${blog.background.parallax.sun};
33 --sun-progress-percent: ${percent}`}
34 data-parallax
35>
36 <circle fill={blog.palette.environment.sun} cx="50" cy="50" r="35"></circle>
37
38 {
39 new Array(prongs)
40 .fill(0)
41 .map((_, i) => (
42 <polygon
43 fill={blog.palette.environment.sun}
44 points="50 0, 55 10, 45 10"
45 transform={`rotate(${(i / prongs) * 360})`}
46 transform-origin="center"
47 />
48 ))
49 }
50</svg>