-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
179 lines (179 loc) · 13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Christmas patterns</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<svg class="libary" width="0" viewBox="0 0 100 100">
<defs>
<symbol id="rhombus">
<path
d="M69.044 69.538c-33.734 31.579-5.65 32.163-37.978-.79-32.328-32.952-32.926-5.518.808-37.098 33.734-31.579 5.65-32.162 37.978.79s32.926 5.519-.808 37.098z"
/>
</symbol>
<symbol id="flake" x="0">
<path
d="m244.95 145.29h-7.9003l6.0512-6.2512c1.9401-2.0047 1.8882-5.202-0.11583-7.1414-2.0054-1.9407-5.2027-1.8889-7.1414 0.11583l-12.853 13.277h-9.3724l5.9542-6.2936c1.9172-2.0263 1.8283-5.2229-0.19798-7.1394-2.0269-1.9158-5.2222-1.8296-7.1394 0.19798l-12.523 13.235h-8.6552l11.183-12.131c0.90033-0.97644 1.3367-2.2128 1.3313-3.4438 6.7e-4 -0.031 5e-3 -0.0606 5e-3 -0.0916 0.0209-2.7892-2.2222-4.9468-5.0114-4.969l-15.462-0.13535 5.4916-5.4923h17.972c2.7899 0 5.0505-2.2606 5.0505-5.0505s-2.2606-5.0505-5.0505-5.0505h-7.8694l6.734-6.734h17.97c2.7899 0 5.0505-2.2606 5.0505-5.0505s-2.2606-5.0505-5.0505-5.0505h-7.8694l5.4175-5.4175c1.9724-1.9731 1.9724-5.1704 0-7.1428-1.9724-1.971-5.1697-1.9724-7.1428 0l-5.5852 5.5852-0.14277-8.8148c-0.0444-2.7609-2.297-5.0855-5.0478-5.0855h-0.0842c-2.7892 0-5.0128 2.4902-4.9677 5.2795l0.29899 18.564-6.6276 6.6276-0.23906-8.6593c-0.0768-2.7886-2.396-4.9663-5.1879-4.9091-2.7886 0.07677-4.9859 2.4007-4.9091 5.1879l0.50371 18.213-5.8 5.8-0.16229-15.09c0.17104-1.404-0.24108-2.8714-1.2653-4.0013-1.8741-2.068-5.1791-2.2249-7.2458-0.35354l-12.853 11.54v-9.4592l13.347-12.522c2.0263-1.9172 2.171-5.1138 0.25387-7.1401-1.9178-2.0269-5.1986-2.1152-7.2236-0.19798l-6.3778 5.9542v-9.3731l13.389-12.853c2.004-1.9401 2.1118-5.1374 0.17172-7.1414-1.9387-2.0034-5.2202-2.0572-7.2256-0.11582l-6.3354 6.0512v-7.5636c0-2.7899-2.2606-5.0505-5.0505-5.0505s-5.0505 2.2606-5.0505 5.0505v7.0896l-5.4074-5.5192c-1.9724-1.9731-5.1138-1.9724-7.0862-6.73e-4 -1.9731 1.9724-2.0572 5.1704-0.0848 7.1421l12.578 12.663v9.2835l-5.4074-5.5192c-1.9724-1.9731-5.1138-1.9724-7.0862-6.73e-4 -1.9731 1.9724-2.0572 5.1704-0.0848 7.1421l12.578 12.663v8.7677l-11.253-10.989c-2.0061-1.9401-5.1475-1.8862-7.0848 0.12054-1.1165 1.1542-1.5401 2.7037-1.3434 4.1798l-0.47407 14.697-5.433-5.3354v-18.001c0-2.7899-2.2606-5.0505-5.0505-5.0505s-5.0505 2.2606-5.0505 5.0505v7.899l-6.734-6.734v-18c0-2.7899-2.2606-5.0505-5.0505-5.0505s-5.0505 2.2606-5.0505 5.0505v7.899l-5.3037-5.4162c-1.9724-1.971-5.1131-1.9724-7.0869 0-1.9724 1.9731-1.9441 5.1704 0.02828 7.1428l5.4761 5.462-8.5677 0.19663c-2.7892 0.04512-5.0094 2.4801-4.9643 5.268 0.04444 2.7609 2.3003 5.0364 5.0519 5.0364h0.0835l18.502-0.40741 6.6007 6.6007-8.6593 0.23973c-2.7886 0.0768-4.9859 2.4-4.9091 5.1879 0.07542 2.7407 2.3212 4.9111 5.0458 4.9111 0.04714 0 0.09495-6.7e-4 0.14209-2e-3l18.213-0.50437 6.3522 6.3529-15.651 0.35017c-1.3825 0.0384-3.0754 0.39596-4.2249 1.4896-2.0222 1.9219-2.103 5.1185-0.18114 7.1401l0.1037 0.10909c0.10774 0.12525 0.2202 0.2431 0.33872 0.35623l10.717 11.275h-9.0195l-12.523-13.235c-1.9178-2.0276-5.1145-2.1152-7.1401-0.19798-2.0263 1.9172-2.1152 5.1138-0.19798 7.1394l5.9542 6.2936h-9.3724l-12.853-13.277c-1.9387-2.004-5.136-2.0572-7.1414-0.11582-2.004 1.9401-2.0559 5.1374-0.11582 7.1414l6.0512 6.2512h-7.5636c-2.7899 0-5.0505 2.2606-5.0505 5.0505s2.2606 5.0505 5.0505 5.0505h7.0896l-5.5192 5.5192c-1.9731 1.9724-1.9731 5.1704-6.73e-4 7.1421 0.98653 0.98653 2.2788 1.4795 3.5717 1.4795 1.2923 0 2.5852-0.49293 3.571-1.4788l12.663-12.661h9.2835l-5.5192 5.5192c-1.9731 1.9724-1.9731 5.1704-6.73e-4 7.1421 0.98653 0.98654 2.2788 1.4795 3.5717 1.4795 1.2923 0 2.5852-0.49293 3.571-1.4788l12.663-12.662h8.8808l-10.945 11.379c-1.9333 2.0101-1.8714 5.2074 0.13872 7.1407 0.93737 0.90101 2.1306 1.3636 3.3347 1.4027 0.0256 1e-3 0.0492 5e-3 0.0747 6e-3l16.12 0.41886-6.3212 6.3212-18.213-0.50437c-2.7919-0.0572-5.1118 2.1205-5.1886 4.9084-0.07744 2.7886 2.1205 5.1118 4.9084 5.1886l8.6599 0.23974-6.7744 6.7744-18.33-0.17845h-0.0835c-2.7515 0-5.004 2.0572-5.0485 4.8175-0.04512 2.7892 2.1785 4.936 4.9677 4.9818l8.7441 0.12795-5.3933 5.3933c-1.9724 1.9731-1.9724 5.1704 0 7.1428 0.98653 0.98586 2.2795 1.4788 3.5717 1.4788s2.4727-0.49293 3.4593-1.4788l4.6316-4.7441v7.8707c0 2.7899 2.2606 5.0505 5.0505 5.0505s5.0505-2.2606 5.0505-5.0505v-17.97l6.734-6.734v7.8694c0 2.7899 2.2606 5.0505 5.0505 5.0505s5.0505-2.2606 5.0505-5.0505v-17.97l6.5259-6.4141 0.39865 15.296c-0.12592 1.4209 0.37374 2.9986 1.4519 4.0963 0.98855 1.0074 2.3239 1.6249 3.6316 1.6249h0.0317c1.5232 0.0256 2.895-1.0162 3.7199-1.9784l10.502-10.434v8.2088l-12.55 12.663c-1.9724 1.9724-1.9158 5.1704 0.0566 7.1421 0.98586 0.98586 2.3064 1.4788 3.5986 1.4788 1.2923 0 2.4869-0.49293 3.4734-1.4795l5.4216-5.5192v9.2835l-12.55 12.663c-1.9724 1.9724-1.9158 5.1704 0.0566 7.1421 0.98586 0.98586 2.3064 1.4788 3.5987 1.4788 1.2922 0 2.4869-0.49293 3.4734-1.4795l5.4216-5.5192v7.4276c0 2.7899 2.2606 5.0505 5.0505 5.0505s5.0505-2.2606 5.0505-5.0505v-7.9003l6.3636 6.0512c0.98114 0.94949 2.303 1.4216 3.5684 1.4216 1.3199 0 2.6673-0.51448 3.6572-1.5374 1.9401-2.0047 1.7899-5.202-0.21414-7.1414l-13.375-12.853v-9.3731l6.4054 5.9542c0.97643 0.9239 2.2801 1.3818 3.5266 1.3818 1.3394 0 2.7037-0.5293 3.6976-1.5798 1.9172-2.0263 1.73-5.2229-0.29629-7.1394l-13.333-12.522v-8.8168l11.672 10.998c1.2801 1.1098 2.5077 1.9784 4.204 1.9784h0.035c2.7731 0 5.031-2.3044 5.0498-5.0822l0.11179-16.531 6.4949 6.495-0.50438 18.213c-0.0774 2.7886 2.1199 5.1118 4.9084 5.1886 0.0478 1e-3 0.0956 2e-3 0.14277 2e-3 2.7246 0 4.9704-2.1704 5.0458-4.9104l0.23973-8.6599 6.6296 6.6296-0.30168 18.457c-0.0451 2.7892 2.1784 5.1145 4.9677 5.1145h0.0835c2.7515 0 5.004-2.1192 5.0485-4.8795l0.14276-8.7508 5.3468 5.3468c0.98654 0.98586 2.2795 1.4788 3.5717 1.4788 1.2923 0 2.5852-0.49292 3.5717-1.4788 1.9724-1.9731 1.9724-5.1704 0-7.1428l-4.7758-4.7758h7.899c2.7899 0 5.0505-2.2606 5.0505-5.0505s-2.2606-5.0505-5.0505-5.0505h-18l-6.734-6.734h7.899c2.7899 0 5.0505-2.2606 5.0505-5.0505s-2.2606-5.0505-5.0505-5.0505h-18l-6.1158-6.1158 15.484-0.6761c1.3091-0.0545 2.6337-0.65252 3.4498-1.4492 1.996-1.9488 2.0337-5.1461 0.0855-7.1414l-10.62-10.88h8.1488l12.663 12.663c0.98586 0.98586 2.2788 1.4788 3.571 1.4788s2.5852-0.49293 3.5717-1.4795c1.9724-1.9724 1.9724-5.1704-6.8e-4 -7.1421l-5.5192-5.5192h9.2835l12.663 12.663c0.98586 0.98585 2.2788 1.4788 3.5711 1.4788 1.2922 0 2.5852-0.49293 3.5717-1.4795 1.9724-1.9724 1.9724-5.1704-6.7e-4 -7.1421l-5.5192-5.5192h7.4249c2.7899 0 5.0505-2.2606 5.0505-5.0505s-2.2606-5.0519-5.0505-5.0519zm-117.27-10.914 10.914 10.914h-15.681l-9.8586-10.37zm-0.22896 31.515-14.298-0.37172 9.7428-10.129h15.055zm16.943 11.418-9.5448 9.4808-0.36565-13.813 9.9111-9.967v14.299zm0-40.281-10.291-10.403 0.28957-13.534 10.001 9.7232v14.213zm10.101-13.987 11.267-10.102 0.099 14.374-11.366 11.31zm10.827 64.032-10.827-9.9737v-15.684l10.871 10.815zm8.1185-21.223-10.459-10.459h14.427l9.6323 9.8646zm3.8815-20.56h-14.985l10.844-10.844 14.102 0.0391z"
/>
</symbol>
<symbol id="cocktail">
<path
d="m23.301 6.4824 24.699 43.313v46.205h4v-46.473l24.99-42.76-53.689-0.28516z"
stroke-width=".7303"
/>
<rect x="35" y="95.562" width="30" height="3" />
</symbol>
</defs>
</svg>
<div class="container">
<div class="candy-cane"></div>
<svg class="rhombus-green" viewBox="0 0 100 100">
<use href="#rhombus" />
</svg>
<div class="stripes-horizontal-green-red"></div>
<div class="white-ball"></div>
<svg class="snowflake" viewBox="0 0 300 300">
<use class="flake" href="#flake" x="0" />
</svg>
<svg class="rhombus-red" viewBox="0 0 100 100">
<use href="#rhombus" />
<use href="#rhombus" />
<use href="#rhombus" />
</svg>
<svg class="polka-dots" viewBox="0 0 1200 100">
<defs>
<pattern
id="polka"
x="0"
y="0"
width="100"
height="100"
patternUnits="userSpaceOnUse"
>
<circle fill="white" cx="50" cy="50" r="20"></circle>
</pattern>
</defs>
<rect width="100%" height="100%" fill="var(--cgreener)"></rect>
<rect width="100%" height="100%" fill="url(#polka)"></rect>
</svg>
<svg class="pacman" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="var(--cgreen)" />
<circle cx="50" cy="50" r="45" fill="var(--cyellow)" />
<path
class="mouth"
d="m96.57 17.359a68 45 0 0 1 21.129 34.548 68 45 0 0 1-25.474 33.24l-42.465-35.147z"
fill="var(--cgreen)"
/>
</svg>
<div class="pudding"></div>
<svg class="mistletoe" viewBox="0 0 100 100">
<g class="plant">
<path
class="leave"
d="m13.536 18.459c-3.0312-2.3789 1.6952-8.0058 4.5001-10.648 1.644-1.5485 4.1376-2.0619 6.3873-2.2598 5.1238-0.45088 10.309 1.0058 15.222 2.5272 5.0642 1.568 14.416 6.7167 14.416 6.7167 3.4047 5.2028 2.8407 11.059 3.7382 16.847-17.092 17.691-26.771-0.10736-44.264-13.183z"
fill="var(--cgreen)"
/>
<circle
cx="32.173"
cy="50.339"
r="12.5"
fill="white"
stroke-width="2.7855"
/>
<path
d="m89.754-12.752c-13.662 15.711-32.05 44.561-39.25 59.887-8.8132 18.758-12.713 49.803-13.319 74.054"
fill="none"
stroke="var(--cbrown)"
stroke-width="6"
/>
<path
class="leave"
d="m54.236 41.001s18.521-15.308 29.013-13.435c2.7729 0.49517 3.3861 4.8531 5.9653 5.9854 0.8261 0.36266 2.2077-0.64416 2.7044 0.10897 0.86031 1.3043-0.77577 3.0988-1.6705 4.3798-5.1675 7.3987-20.429 17.767-20.429 17.767l-9.5331 7.9952c-6.1729 2.0014-9.6022 2.3457-15.091-0.35 2.2032-10.647 2.2417-14.794 9.0406-22.452z"
fill="var(--cgreen)"
/>
</g>
</svg>
<div class="stripes-vertical-green-white"></div>
<div class="stripes-diagonal-green-greener"></div>
<svg class="star" viewBox="0 0 512 512">
<path
d="m256.51 94.585-52.816 105.91-117.19 16.534 84.407 82.961-20.489 116.56 104.98-54.64 104.53 55.507-19.524-116.72 85.091-82.259-117.05-17.503z"
fill="var(--cyellow)"
/>
</svg>
<div class="dancing-balls"></div>
<div class="dancing-balls dancing-balls-reverse"></div>
<svg
class="lips"
viewBox="0 0 100 100"
preserveAspectRatio="xMaxYMid meet"
>
<path
d="m2.443 52.865h95.113c-14.481 22.914-33.451 22.916-47.556 22.916-14.106 0-33.075-2e-3 -47.557-22.916zm64.741-28.646c-11.977 0-17.245 7.9-17.245 7.9s-4.996-7.9-17.125-7.9c-8.619 0-17.605 4.007-32.812 22.917h99.998c-15.205-18.909-24.194-22.917-32.816-22.917z"
/>
<ellipse cx="50" cy="50" rx="23.748" ry="11.863" fill="var(--cgreen)" />
</svg>
<svg class="trees" viewBox="0 0 600 100">
<defs>
<pattern
id="tree"
x="0"
y="0"
width="100"
height="100"
patternUnits="userSpaceOnUse"
>
<path d="m0 100 50-100 50 100z" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#tree)"></rect>
</svg>
<div class="open-present"></div>
<svg class="snowflake2" viewBox="0 0 600 300">
<use class="flake" href="#flake" x="20" />
<use class="flake" href="#flake" x="200" y="300" />
<use class="flake" href="#flake" x="-200" y="-200" />
<use class="flake" href="#flake" x="-100" y="-300" />
<use class="flake" href="#flake" x="400" y="-350" />
<use class="flake" href="#flake" x="600" y="400" />
<use class="flake" href="#flake" x="500" y="100" />
<use class="flake" href="#flake" x="100" y="-500" />
</svg>
<svg
class="cocktails"
version="1.1"
viewBox="0 0 400 100"
xmlns="http://www.w3.org/2000/svg"
>
<use href="#cocktail" />
<use x="33.3%" href="#cocktail" />
<use x="66.6%" href="#cocktail" />
</svg>
<svg class="furry-lining" viewBox="0 0 600 100">
<defs>
<pattern
id="furry"
x="0"
y="0"
width="100"
height="100"
patternUnits="userSpaceOnUse"
>
<rect height="60" width="100" fill="white" />
<circle fill="white" cx="0" cy="50" r="20" />
<circle fill="white" cx="20" cy="50" r="20" />
<circle fill="white" cx="40" cy="50" r="20" />
<circle fill="white" cx="60" cy="50" r="20" />
<circle fill="white" cx="80" cy="50" r="20" />
<circle fill="white" cx="100" cy="50" r="20" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="red"></rect>
<rect width="100%" height="100%" fill="url(#furry)"></rect>
</svg>
</div>
</body>
</html>