vod frog, frog with the vods
replace SVG plant overlay with real fern photo, white made transparent
+15
-67
+11
-62
src/lib/PlantOverlay.svelte
+11
-62
src/lib/PlantOverlay.svelte
···
1
1
<script lang="ts">
2
-
let { side }: { side: 'left' | 'right' } = $props();
2
+
// Fern leaves overlay using a real photo with transparent background
3
3
</script>
4
4
5
-
<div class="plant-overlay {side}">
6
-
<svg viewBox="0 0 160 900" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
7
-
{#if side === 'left'}
8
-
<!-- Main stem -->
9
-
<path
10
-
d="M 50 900 Q 55 780 42 660 Q 35 540 48 420 Q 55 300 40 180 Q 30 80 50 0"
11
-
stroke="#0A182B"
12
-
stroke-width="7"
13
-
fill="none"
14
-
stroke-linecap="round"
15
-
/>
16
-
<!-- Large leaves -->
17
-
<ellipse cx="42" cy="140" rx="40" ry="14" fill="#0A182B" transform="rotate(-35 42 140)" />
18
-
<ellipse cx="48" cy="290" rx="44" ry="15" fill="#0A182B" transform="rotate(25 48 290)" />
19
-
<ellipse cx="38" cy="440" rx="38" ry="13" fill="#0A182B" transform="rotate(-30 38 440)" />
20
-
<ellipse cx="52" cy="570" rx="42" ry="14" fill="#0A182B" transform="rotate(20 52 570)" />
21
-
<ellipse cx="44" cy="710" rx="40" ry="14" fill="#0A182B" transform="rotate(-22 44 710)" />
22
-
<ellipse cx="48" cy="830" rx="36" ry="12" fill="#0A182B" transform="rotate(18 48 830)" />
23
-
<!-- Smaller accent leaves -->
24
-
<ellipse cx="55" cy="210" rx="28" ry="10" fill="#0A182B" transform="rotate(40 55 210)" />
25
-
<ellipse cx="50" cy="370" rx="24" ry="9" fill="#0A182B" transform="rotate(35 50 370)" />
26
-
<ellipse cx="45" cy="510" rx="30" ry="11" fill="#0A182B" transform="rotate(-28 45 510)" />
27
-
<ellipse cx="52" cy="650" rx="26" ry="9" fill="#0A182B" transform="rotate(30 52 650)" />
28
-
<ellipse cx="40" cy="780" rx="22" ry="8" fill="#0A182B" transform="rotate(-25 40 780)" />
29
-
{:else}
30
-
<!-- Main stem -->
31
-
<path
32
-
d="M 110 900 Q 105 780 118 660 Q 125 540 112 420 Q 105 300 120 180 Q 130 80 110 0"
33
-
stroke="#0A182B"
34
-
stroke-width="7"
35
-
fill="none"
36
-
stroke-linecap="round"
37
-
/>
38
-
<!-- Large leaves -->
39
-
<ellipse cx="118" cy="170" rx="40" ry="14" fill="#0A182B" transform="rotate(35 118 170)" />
40
-
<ellipse cx="112" cy="320" rx="44" ry="15" fill="#0A182B" transform="rotate(-25 112 320)" />
41
-
<ellipse cx="122" cy="470" rx="38" ry="13" fill="#0A182B" transform="rotate(30 122 470)" />
42
-
<ellipse cx="108" cy="610" rx="42" ry="14" fill="#0A182B" transform="rotate(-20 108 610)" />
43
-
<ellipse cx="116" cy="750" rx="40" ry="14" fill="#0A182B" transform="rotate(22 116 750)" />
44
-
<ellipse cx="112" cy="860" rx="36" ry="12" fill="#0A182B" transform="rotate(-18 112 860)" />
45
-
<!-- Smaller accent leaves -->
46
-
<ellipse cx="105" cy="240" rx="28" ry="10" fill="#0A182B" transform="rotate(-40 105 240)" />
47
-
<ellipse cx="110" cy="400" rx="24" ry="9" fill="#0A182B" transform="rotate(-35 110 400)" />
48
-
<ellipse cx="115" cy="540" rx="30" ry="11" fill="#0A182B" transform="rotate(28 115 540)" />
49
-
<ellipse cx="108" cy="680" rx="26" ry="9" fill="#0A182B" transform="rotate(-30 108 680)" />
50
-
{/if}
51
-
</svg>
5
+
<div class="plant-overlay">
6
+
<img src="/leaves.png" alt="" class="leaves" />
52
7
</div>
53
8
54
9
<style>
55
10
.plant-overlay {
56
11
position: fixed;
57
-
top: 0;
58
-
bottom: 0;
59
-
width: 100px;
12
+
inset: 0;
60
13
z-index: 100;
61
14
pointer-events: none;
62
-
opacity: 0.85;
63
-
}
64
-
65
-
.plant-overlay.left {
66
-
left: 10px;
67
-
}
68
-
69
-
.plant-overlay.right {
70
-
right: 10px;
15
+
overflow: hidden;
71
16
}
72
17
73
-
.plant-overlay svg {
18
+
.leaves {
19
+
position: absolute;
20
+
inset: 0;
74
21
width: 100%;
75
22
height: 100%;
23
+
object-fit: cover;
24
+
opacity: 0.85;
76
25
}
77
26
78
-
@media (max-width: 900px) {
27
+
@media (max-width: 768px) {
79
28
.plant-overlay {
80
29
display: none;
81
30
}
+2
-2
src/lib/theme.ts
+2
-2
src/lib/theme.ts
···
44
44
const r3 = seededRandom(seed, 2);
45
45
46
46
return {
47
-
rotation: (r1 - 0.5) * 4, // -2 to +2 degrees
47
+
rotation: (r1 - 0.5) * 6, // -3 to +3 degrees
48
48
translateX: (r2 - 0.5) * 12, // -6 to +6 px
49
-
translateY: (r3 - 0.5) * 8, // -4 to +4 px
49
+
translateY: (r3 - 0.5) * 60, // -30 to +30 px
50
50
};
51
51
}
52
52
+1
-2
src/routes/+layout.svelte
+1
-2
src/routes/+layout.svelte
+1
-1
src/routes/+page.svelte
+1
-1
src/routes/+page.svelte
static/leaves.png
static/leaves.png
This is a binary file and will not be displayed.