Skip to content

Commit 3f6cd32

Browse files
vaaskivaaski
committed
WIP static svg
1 parent 7211a39 commit 3f6cd32

2 files changed

Lines changed: 305 additions & 0 deletions

File tree

‎components/svg-hero.server.vue‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
<script setup lang="ts">
2+
const stages = [
3+
"M 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 0.5 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 Z",
4+
"M96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186 .5 0 43.9409 0 96.0379 101.889 96.0379 101.889 96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186Z",
5+
"M170.085 42.0683 170.085 42.0683 170.085 42.0683 170.085 42.0683 170.085 42.0683 148.365 84.5494 148.365 84.5494 96.0308 186 .5 0 43.9409 0 96.0379 101.889 148.135 0 191.576 0 170.085 42.0683 170.085 42.0683 170.085 42.0683 170.085 42.0683 170.085 42.0683Z",
6+
"M205.508 111.348 205.508 111.348 205.508 111.348 205.508 111.348 243.678 186 200.237 186 148.365 84.5494 96.0308 186 .5 0 43.9409 0 96.0379 101.889 148.135 0 191.576 0 170.085 42.0683 182.144 65.654 182.144 65.654 205.508 111.348 205.508 111.348Z",
7+
"M239.394 45.6091 218.422 86.2804 218.422 86.2804 205.508 111.348 243.678 186 200.237 186 148.365 84.5494 96.0308 186 .5 0 43.9409 0 96.0379 101.889 148.135 0 191.576 0 170.085 42.0683 182.144 65.654 215.969 0 239.394 45.6091 239.394 45.6091Z",
8+
"M311.5 186 268.059 186 218.422 86.2804 205.508 111.348 243.678 186 200.237 186 148.365 84.5494 96.0308 186 .5 0 43.9409 0 96.0379 101.889 148.135 0 191.576 0 170.085 42.0683 182.144 65.654 215.969 0 239.394 45.6091 311.5 186Z",
9+
]
10+
11+
const values = computed(() => stages.join(";"))
12+
13+
const keySplines = computed(() => {
14+
return Array.from({ length: stages.length - 1 }, () => "0.87 0 0.13 1").join(";")
15+
})
16+
17+
const keyTimes = computed(() => {
18+
const stepSize = 1 / (stages.length - 1)
19+
return Array.from({ length: stages.length }, (_, index) => {
20+
return Math.min(index * stepSize, 1)
21+
})
22+
.map((v) => Math.floor(v * 100) / 100)
23+
.join(";")
24+
})
25+
26+
const width = 1200
27+
const height = 630
28+
29+
const STAR_AMOUNT = 50
30+
const X_SPEED = 0.125
31+
32+
const stars = Array.from({ length: STAR_AMOUNT })
33+
.fill(0)
34+
.map(() => {
35+
const star = {
36+
xStart: Math.random() * width,
37+
xSpeed: (Math.random() * X_SPEED + X_SPEED / 2) * width,
38+
size: Math.random() * 2 + 0.75,
39+
duration: (Math.random() * 0.25 + 0.05) * 300,
40+
begin: 0,
41+
}
42+
43+
star.begin = Math.random() * (star.duration / 4)
44+
45+
if (Math.random() > 0.5) {
46+
star.xSpeed *= -1
47+
}
48+
49+
return star
50+
})
51+
52+
console.log("test 2")
53+
</script>
54+
55+
<template>
56+
<svg
57+
:width="width"
58+
:height="height"
59+
:viewBox="`0 0 ${width} ${height}`"
60+
fill="none"
61+
xmlns="http://www.w3.org/2000/svg"
62+
>
63+
<g clip-path="url(#clip0_174_79)">
64+
<g id="backdrop" filter="url(#filter0_d_174_79)">
65+
<rect x="25" y="25" width="1150" height="580" rx="24" fill="black" />
66+
<g opacity="0.75">
67+
<rect
68+
x="25"
69+
y="25"
70+
width="1150"
71+
height="580"
72+
rx="24"
73+
fill="url(#paint0_radial_174_79)"
74+
/>
75+
<rect
76+
x="25"
77+
y="25"
78+
width="1150"
79+
height="580"
80+
rx="24"
81+
fill="url(#paint1_radial_174_79)"
82+
/>
83+
<rect
84+
x="25"
85+
y="25"
86+
width="1150"
87+
height="580"
88+
rx="24"
89+
fill="url(#paint2_radial_174_79)"
90+
/>
91+
<rect
92+
x="25"
93+
y="25"
94+
width="1150"
95+
height="580"
96+
rx="24"
97+
fill="url(#paint3_radial_174_79)"
98+
/>
99+
</g>
100+
</g>
101+
<clipPath id="background-clip">
102+
<rect x="25" y="25" width="1150" height="580" rx="24" fill="black" />
103+
</clipPath>
104+
<circle
105+
v-for="star in stars"
106+
:key="star.begin"
107+
:opacity="star.size / 7.5"
108+
:r="star.size"
109+
fill="white"
110+
clip-path="url(#background-clip)"
111+
>
112+
<animate
113+
attributeName="cy"
114+
:values="`${height}; 0`"
115+
:dur="`${star.duration}s`"
116+
:begin="`${star.begin}s`"
117+
repeatCount="indefinite"
118+
/>
119+
<animate
120+
attributeName="cx"
121+
:values="`${star.xStart}; ${star.xStart + star.xSpeed}`"
122+
:dur="`${star.duration}s`"
123+
:begin="`${star.begin}s`"
124+
repeatCount="indefinite"
125+
/>
126+
</circle>
127+
<g id="logo-glow" opacity="0" class="glow-fade-in">
128+
<rect
129+
x="-156"
130+
y="-176"
131+
width="1512"
132+
height="982"
133+
fill="url(#paint4_radial_174_79)"
134+
fill-opacity="0.41"
135+
/>
136+
<rect
137+
x="-156"
138+
y="-176"
139+
width="1512"
140+
height="982"
141+
fill="url(#paint5_radial_174_79)"
142+
/>
143+
</g>
144+
<svg
145+
id="logo"
146+
width="312"
147+
height="186"
148+
:x="width / 2 - 312 / 2"
149+
:y="height / 2 - 186 / 2"
150+
viewBox="0 0 312 186"
151+
fill="none"
152+
xmlns="http://www.w3.org/2000/svg"
153+
>
154+
<path ref="path" fill="white">
155+
<animate
156+
attributeName="d"
157+
begin="250ms"
158+
dur="750ms"
159+
fill="freeze"
160+
calcMode="spline"
161+
:keySplines="keySplines"
162+
:keyTimes="keyTimes"
163+
:values="values"
164+
/>
165+
</path>
166+
</svg>
167+
</g>
168+
<defs>
169+
<filter
170+
id="filter0_d_174_79"
171+
x="5"
172+
y="5"
173+
width="1198"
174+
height="628"
175+
filterUnits="userSpaceOnUse"
176+
color-interpolation-filters="sRGB"
177+
>
178+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
179+
<feColorMatrix
180+
in="SourceAlpha"
181+
type="matrix"
182+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
183+
result="hardAlpha"
184+
/>
185+
<feOffset dx="4" dy="4" />
186+
<feGaussianBlur stdDeviation="12" />
187+
<feComposite in2="hardAlpha" operator="out" />
188+
<feColorMatrix
189+
type="matrix"
190+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
191+
/>
192+
<feBlend
193+
mode="normal"
194+
in2="BackgroundImageFix"
195+
result="effect1_dropShadow_174_79"
196+
/>
197+
<feBlend
198+
mode="normal"
199+
in="SourceGraphic"
200+
in2="effect1_dropShadow_174_79"
201+
result="shape"
202+
/>
203+
</filter>
204+
<radialGradient
205+
id="paint0_radial_174_79"
206+
cx="0"
207+
cy="0"
208+
r="1"
209+
gradientUnits="userSpaceOnUse"
210+
gradientTransform="translate(325.5 680.5) rotate(15.6949) scale(691.274 559.341)"
211+
>
212+
<stop stop-color="#00FFE0" stop-opacity="0.43" />
213+
<stop offset="1" stop-opacity="0" />
214+
</radialGradient>
215+
<radialGradient
216+
id="paint1_radial_174_79"
217+
cx="0"
218+
cy="0"
219+
r="1"
220+
gradientUnits="userSpaceOnUse"
221+
gradientTransform="translate(1389 355.5) rotate(141.011) scale(936.808 834.471)"
222+
>
223+
<stop stop-color="#FF006B" stop-opacity="0.43" />
224+
<stop offset="1" stop-opacity="0" />
225+
</radialGradient>
226+
<radialGradient
227+
id="paint2_radial_174_79"
228+
cx="0"
229+
cy="0"
230+
r="1"
231+
gradientUnits="userSpaceOnUse"
232+
gradientTransform="translate(626 816) rotate(-2.07138) scale(943.598 733.209)"
233+
>
234+
<stop stop-color="#FF00E6" stop-opacity="0.46" />
235+
<stop offset="1" stop-opacity="0" />
236+
</radialGradient>
237+
<radialGradient
238+
id="paint3_radial_174_79"
239+
cx="0"
240+
cy="0"
241+
r="1"
242+
gradientUnits="userSpaceOnUse"
243+
gradientTransform="translate(-232.837 427.515) rotate(47.2401) scale(1118.59 1176.88)"
244+
>
245+
<stop stop-color="#7F00FF" stop-opacity="0.46" />
246+
<stop offset="1" stop-opacity="0" />
247+
</radialGradient>
248+
<radialGradient
249+
id="paint4_radial_174_79"
250+
cx="0"
251+
cy="0"
252+
r="1"
253+
gradientUnits="userSpaceOnUse"
254+
gradientTransform="translate(600 315) rotate(90) scale(491 910.359)"
255+
>
256+
<stop stop-color="white" stop-opacity="0.31" />
257+
<stop offset="1" stop-opacity="0" />
258+
</radialGradient>
259+
<radialGradient
260+
id="paint5_radial_174_79"
261+
cx="0"
262+
cy="0"
263+
r="1"
264+
gradientUnits="userSpaceOnUse"
265+
gradientTransform="translate(600 315) rotate(90) scale(235 382.651)"
266+
>
267+
<stop stop-color="white" stop-opacity="0.43" />
268+
<stop offset="1" stop-opacity="0" />
269+
</radialGradient>
270+
<clipPath id="clip0_174_79">
271+
<rect :width="width" :height="height" fill="white" />
272+
</clipPath>
273+
</defs>
274+
</svg>
275+
</template>
276+
277+
<style scoped lang="scss">
278+
.glow-fade-in {
279+
animation: fade-in 2000ms forwards;
280+
animation-delay: 500ms;
281+
}
282+
@keyframes fade-in {
283+
from {
284+
opacity: 0;
285+
}
286+
to {
287+
opacity: 0.4;
288+
}
289+
}
290+
</style>

‎pages/static-svg.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<main>
3+
<SvgHero class="svg-hero" />
4+
</main>
5+
</template>
6+
7+
<style scoped lang="scss">
8+
main {
9+
height: 100%;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
background: #0d1117;
14+
}
15+
</style>

0 commit comments

Comments
 (0)