Skip to content

Commit 7e36a55

Browse files
JesperDramschJesperDramsch
committed
design: more holidays
1 parent 43e529d commit 7e36a55

File tree

2 files changed

+116
-20
lines changed

2 files changed

+116
-20
lines changed

‎_includes/sneks.html‎

Lines changed: 85 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -30,25 +30,21 @@
3030
<pattern
3131
id="candy-cane"
3232
patternUnits="userSpaceOnUse"
33-
width="20"
34-
height="20"
35-
patternTransform="rotate(45)"
33+
width="60"
34+
height="60"
35+
patternTransform="rotate(60)"
3636
>
37-
<rect width="40" height="80" fill="red" />
38-
<rect x="7" width="40" height="80" fill="white" />
37+
<rect width="120" height="240" fill="red" /> <!-- Increased from 40x80 -->
38+
<rect x="21" width="120" height="240" fill="white" />
3939
</pattern>
40-
<pattern
41-
id="easter-eggs"
42-
patternUnits="userSpaceOnUse"
43-
width="70"
44-
height="70"
45-
>
46-
<rect width="100%" height="100%" fill="lightyellow" />
47-
<ellipse cx="15" cy="15" rx="10" ry="15" fill="green" />
48-
<ellipse cx="15" cy="15" rx="10" ry="15" fill="none" stroke="white" stroke-width="2" />
40+
<pattern id="easter-eggs" patternUnits="userSpaceOnUse" width="560" height="560">
41+
<rect width="100%" height="100%" fill="lightgreen"/>
42+
<!-- Egg 1 -->
43+
<ellipse cx="110" cy="120" rx="80" ry="120" fill="green"/>
4944
<!-- Egg 2 -->
50-
<ellipse cx="35" cy="35" rx="10" ry="15" fill="blue" />
51-
<ellipse cx="35" cy="35" rx="10" ry="15" fill="none" stroke="white" stroke-width="2" />
45+
<ellipse cx="290" cy="280" rx="80" ry="120" fill="blue"/>
46+
<!-- Egg 3 -->
47+
<ellipse cx="140" cy="430" rx="80" ry="120" fill="orange"/>
5248
</pattern>
5349
<pattern id="pride" patternUnits="userSpaceOnUse" width="315" height="885" patternTransform="rotate(30) scale(0.75, 0.25)">
5450
<!-- Rainbow stripes -->
@@ -60,14 +56,86 @@
6056
<rect width="315" height="147.5" y="737.5" fill="#8B00FF"></rect> <!-- Purple -->
6157

6258
</pattern>
59+
<pattern id="earth-day" patternUnits="userSpaceOnUse" width="100" height="100">
60+
<rect width="100" height="100" fill="lightgreen"/>
61+
62+
<!-- Tree 1 -->
63+
<g transform="translate(25,25)">
64+
<!-- Triangle top -->
65+
<polygon points="0,-15 15,15 -15,15" fill="#228B22"/>
66+
<!-- Trunk -->
67+
<rect x="-3" y="15" width="6" height="10" fill="#8B4513"/>
68+
</g>
69+
70+
<!-- Tree 2 -->
71+
<g transform="translate(75,25)">
72+
<polygon points="0,-15 15,15 -15,15" fill="#228B22"/>
73+
<rect x="-3" y="15" width="6" height="10" fill="#8B4513"/>
74+
</g>
75+
76+
<!-- Tree 3 -->
77+
<g transform="translate(25,75)">
78+
<polygon points="0,-15 15,15 -15,15" fill="#228B22"/>
79+
<rect x="-3" y="15" width="6" height="10" fill="#8B4513"/>
80+
</g>
81+
82+
<!-- Tree 4 -->
83+
<g transform="translate(75,75)">
84+
<polygon points="0,-15 15,15 -15,15" fill="#228B22"/>
85+
<rect x="-3" y="15" width="6" height="10" fill="#8B4513"/>
86+
</g>
87+
</pattern>
88+
<pattern id="spider-web" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
89+
<!-- Background -->
90+
<rect width="100" height="100" fill="#FF8C00"/>
91+
92+
<g stroke="black" fill="none">
93+
<!-- Center point -->
94+
<circle cx="50" cy="50" r="1" fill="white"/>
95+
96+
<!-- Radial threads - positioned at octagon corners -->
97+
<path d="M50,50 L50,0" stroke-width="0.7"/>
98+
<path d="M50,50 L100,50" stroke-width="0.7"/>
99+
<path d="M50,50 L50,100" stroke-width="0.7"/>
100+
<path d="M50,50 L0,50" stroke-width="0.7"/>
101+
<path d="M50,50 L92,8" stroke-width="0.7"/>
102+
<path d="M50,50 L92,92" stroke-width="0.7"/>
103+
<path d="M50,50 L8,92" stroke-width="0.7"/>
104+
<path d="M50,50 L8,8" stroke-width="0.7"/>
105+
106+
<!-- Concentric octagons aligned with radial lines -->
107+
<!-- Smallest octagon -->
108+
<path d="M50,40 L56,42 L58,50 L56,58 L50,60 L44,58 L42,50 L44,42 Z"
109+
stroke-width="0.3"/>
110+
111+
<!-- Small octagon -->
112+
<path d="M50,32 L62,34 L66,50 L62,66 L50,68 L38,66 L34,50 L38,34 Z"
113+
stroke-width="0.3"/>
114+
115+
<!-- Medium octagon -->
116+
<path d="M50,24 L70,26 L74,50 L70,74 L50,76 L30,74 L26,50 L30,26 Z"
117+
stroke-width="0.3"/>
118+
119+
<!-- Large octagon -->
120+
<path d="M50,16 L78,18 L82,50 L78,82 L50,84 L22,82 L18,50 L22,18 Z"
121+
stroke-width="0.3"/>
122+
123+
<!-- Connecting threads between octagons -->
124+
<path d="M44,42 L38,34" stroke-width="0.2" opacity="0.6"/>
125+
<path d="M56,42 L62,34" stroke-width="0.2" opacity="0.6"/>
126+
<path d="M56,58 L62,66" stroke-width="0.2" opacity="0.6"/>
127+
<path d="M44,58 L38,66" stroke-width="0.2" opacity="0.6"/>
128+
</g>
129+
</pattern>
130+
63131
</defs>
64132
<path
65133
id="Snek"
66134
fill="#646464"
67135
stroke="#646464"
68136
stroke-width="1"
69137
d="M 88.00,78.38 C 89.95,78.23 90.96,77.98 93.00,78.38 110.72,80.10 107.67,105.69 90.00,103.80 76.59,102.36 72.32,84.05 88.00,78.38 Z M 307.00,885.00 C 307.00,885.00 307.00,160.00 307.00,160.00 307.00,85.00 243.00,10.00 157.00,10.00 82.46,10.00 8.86,82.12 7.00,157.09 7.00,159.13 8.63,160.00 11.73,160.00 34.54,160.00 132.00,160.00 132.00,160.00 149.48,160.00 157.00,166.91 157.00,185.00 157.00,185.00 157.00,885.00 157.00,885.00 157.00,885.00 307.00,885.00 307.00,885.00 Z"
70-
/>
138+
/>
71139
</svg>
72140
</div>
73141
<div id="smol-snek-tongue">

‎static/js/snek.js‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function getSeasonStyles() {
66
// Halloween: October
77
if (month === 9) {
88
return {
9-
body: 'orange',
9+
body: 'url(#spider-web)',
1010
tongue: 'black',
1111
};
1212
}
@@ -19,13 +19,41 @@ function getSeasonStyles() {
1919
};
2020
}
2121

22-
if (month === 6) {
22+
if (month === 5) {
2323
return {
2424
body: 'url(#pride)',
2525
tongue: 'url(#progress)',
2626
};
2727
}
2828

29+
if (month === 3 && day === 21) {
30+
return {
31+
body: 'url(#earth-day)',
32+
tongue: 'blue',
33+
};
34+
}
35+
36+
if (month === 2 && day === 7) {
37+
return {
38+
body: 'pink',
39+
tongue: 'red',
40+
};
41+
}
42+
43+
if (month === 10 && day === 18) {
44+
return {
45+
body: 'lightblue',
46+
tongue: 'blue',
47+
};
48+
}
49+
50+
if (month == 2 && day == 17) {
51+
return {
52+
body: 'lightgreen',
53+
tongue: 'green',
54+
};
55+
}
56+
2957
// Easter: March/April (needs to be calculated as it changes)
3058
// Function to calculate Easter for the current year
3159
function getEaster(year) {
@@ -55,7 +83,7 @@ function getSeasonStyles() {
5583
if (diff <= twoWeeksInMs) {
5684
return {
5785
body: 'url(#easter-eggs)',
58-
tongue: 'red',
86+
tongue: 'orange',
5987
};
6088
}
6189

0 commit comments

Comments
 (0)