/
index.html
340 lines (327 loc) · 27.5 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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<!-- HTML Meta Tags -->
<title>Talking Avatar</title>
<meta name="description" content="A talking avatar that tells jokes in Animalese">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://kibibit.io/talking-avatars/">
<meta property="og:type" content="website">
<meta property="og:title" content="Talking Avatar">
<meta property="og:description" content="A talking avatar that tells jokes in Animalese">
<meta property="og:image" content="https://kibibit.io/talking-avatars/graph.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="kibibit.io">
<meta property="twitter:url" content="https://kibibit.io/talking-avatars/">
<meta name="twitter:title" content="Talking Avatar">
<meta name="twitter:description" content="A talking avatar that tells jokes in Animalese">
<meta name="twitter:image" content="https://kibibit.io/talking-avatars/graph.png">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#ADD8E6">
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Press+Start+2P&display=swap'>
<link rel="stylesheet"
href="lib/style.css">
</head>
<body>
<div id="cloudbox2">
</div>
<div id="cloudbox">
</div>
<!-- <div class="green-screen"></div> -->
<div class="avatar-container">
<svg width="264px" height="280px" viewBox="0 0 264 280" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Created with getavataaars.com</desc>
<defs>
<clipPath id="theClipPath">
<circle id="cover" r="0" fill="black" cx="0" cy="0" />
</clipPath>
<circle id="path-1" cx="120" cy="120" r="120"></circle>
<path
d="M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z"
id="path-3"></path>
<path
d="M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z"
id="path-5"></path>
</defs>
<g id="clipPathReveal" clip-path="url(#theClipPath)">
<g id="Avataaar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-825.000000, -1100.000000)" id="Avataaar/Circle">
<g transform="translate(825.000000, 1100.000000)">
<g id="Mask"></g>
<g id="Avataaar" stroke-width="1" fill-rule="evenodd" mask="url(#mask-4)">
<g id="Body" transform="translate(32.000000, 36.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use fill="#D0C6AC" xlink:href="#path-5"></use>
<g id="Skin/👶🏽-03-Brown" mask="url(#mask-6)" fill="#EDB98A">
<g transform="translate(-32.000000, 0.000000)" id="Color">
<rect x="0" y="0" width="264" height="244"></rect>
</g>
</g>
<path
d="M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z"
id="Neck-Shadow" fill-opacity="0.100000001" fill="#000000" mask="url(#mask-6)"></path>
</g>
<g id="Clothing/Shirt-Crew-Neck" transform="translate(0.000000, 170.000000)">
<defs>
<path
d="M165.960472,29.2949161 C202.936473,32.3249982 232,63.2942856 232,101.051724 L232,110 L32,110 L32,101.051724 C32,62.9525631 61.591985,31.7649812 99.0454063,29.2195264 C99.0152598,29.5931145 99,29.9692272 99,30.3476251 C99,42.2107177 113.998461,51.8276544 132.5,51.8276544 C151.001539,51.8276544 166,42.2107177 166,30.3476251 C166,29.9946691 165.986723,29.6437014 165.960472,29.2949161 Z"
id="react-path-1"></path>
</defs>
<mask id="react-mask-2" fill="white">
<use xlink:href="#react-path-1"></use>
</mask>
<use id="Clothes" fill="#E6E6E6" fill-rule="evenodd" xlink:href="#react-path-1"></use>
<g id="Color/Palette/Gray-01" mask="url(#react-mask-2)" fill-rule="evenodd" fill="#262E33">
<rect id="🖍Color" x="0" y="0" width="264" height="110"></rect>
</g>
<g id="Shadowy" opacity="0.599999964" stroke-width="1" fill-rule="evenodd" mask="url(#react-mask-2)"
fill-opacity="0.16" fill="#000000">
<g transform="translate(92.000000, 4.000000)" id="Hola-👋🏼">
<ellipse cx="40.5" cy="27.8476251" rx="39.6351047" ry="26.9138272"></ellipse>
</g>
</g>
</g>
<g id="Face" transform="translate(76.000000, 82.000000)" fill="#000000">
<g id="Mouth-Serious" transform="translate(2.000000, 52.000000)" fill="#000000"
fill-opacity="0.699999988">
<rect id="Why-so-serious?" x="42" y="18" width="24" height="6" rx="3"></rect>
</g>
<g id="Mouth/Scream-Open" transform="translate(2.000000, 52.000000)">
<defs>
<path
d="M34.0082051,15.1361102 C35.1280248,29.123916 38.2345159,40.9925405 53.9961505,40.9999965 C69.757785,41.0074525 72.9169073,29.0566179 73.9942614,15.0063928 C74.0809675,13.8756222 73.1738581,12.9999965 72.0369872,12.9999965 C65.3505138,12.9999965 62.6703194,14.9936002 53.9894323,14.9999965 C45.3085452,15.0063928 40.7567994,12.9999965 36.0924943,12.9999965 C34.9490269,12.9999965 33.8961688,13.7366502 34.0082051,15.1361102 Z"
id="react-path-13"></path>
</defs>
<mask id="react-mask-14" fill="white">
<use xlink:href="#react-path-13"
transform="translate(54.000000, 26.999998) scale(1, -1) translate(-54.000000, -26.999998) "></use>
</mask>
<use id="Mouth" fill-opacity="0.699999988" fill="#000000" fill-rule="evenodd"
transform="translate(54.000000, 26.999998) scale(1, -1) translate(-54.000000, -26.999998) "
xlink:href="#react-path-13"></use>
<rect id="Teeth" fill="#FFFFFF" fill-rule="evenodd" mask="url(#react-mask-14)" x="39" y="2" width="31"
height="16" rx="5"></rect>
<g id="Tongue" stroke-width="1" fill-rule="evenodd" mask="url(#react-mask-14)" fill="#FF4F6D">
<g transform="translate(38.000000, 32.000000)" id="Say-ahhhh">
<circle cx="11" cy="11" r="11"></circle>
<circle cx="21" cy="11" r="11"></circle>
</g>
</g>
</g>
<g id="Mouth/Disbelief" transform="translate(2.000000, 52.000000)" fill-opacity="0.699999988"
fill="#000000">
<path d="M40,15 C40,22.7319865 46.2680135,29 54,29 L54,29 C61.7319865,29 68,22.7319865 68,15"
id="Mouth"
transform="translate(54.000000, 22.000000) scale(1, -1) translate(-54.000000, -22.000000) "></path>
</g>
<g id="Mouth-Smile" transform="translate(2.000000, 52.000000)">
<defs>
<path
d="M35.117844,15.1280772 C36.1757121,24.6198025 44.2259873,32 54,32 C63.8042055,32 71.8740075,24.574136 72.8917593,15.0400546 C72.9736685,14.272746 72.1167429,13 71.042767,13 C56.1487536,13 44.7379213,13 37.0868244,13 C36.0066168,13 35.0120058,14.1784435 35.117844,15.1280772 Z"
id="react-path-3"></path>
</defs>
<mask id="react-mask-4" fill="white">
<use xlink:href="#react-path-3"></use>
</mask>
<use id="Mouth" fill-opacity="0.699999988" fill="#000000" fill-rule="evenodd"
xlink:href="#react-path-3"></use>
<rect id="Teeth" fill="#FFFFFF" fill-rule="evenodd" mask="url(#react-mask-4)" x="39" y="2" width="31"
height="16" rx="5"></rect>
<g id="Tongue" stroke-width="1" fill-rule="evenodd" mask="url(#react-mask-4)" fill="#FF4F6D">
<g transform="translate(38.000000, 24.000000)">
<circle cx="11" cy="11" r="11"></circle>
<circle cx="21" cy="11" r="11"></circle>
</g>
</g>
</g>
<g id="Nose/Default" transform="translate(28.000000, 40.000000)" fill-opacity="0.16">
<path d="M16,8 C16,12.418278 21.372583,16 28,16 L28,16 C34.627417,16 40,12.418278 40,8" id="Nose">
</path>
</g>
<g id="Eyes/Closed-😌" transform="translate(0.000000, 8.000000)" fill-opacity="0.599999964">
<path
d="M16.1601674,32.4473116 C18.006676,28.648508 22.1644225,26 26.9975803,26 C31.8136766,26 35.9591217,28.629842 37.8153518,32.4071242 C38.3667605,33.5291977 37.5821037,34.4474817 36.790607,33.7670228 C34.3395063,31.6597833 30.8587163,30.3437884 26.9975803,30.3437884 C23.2572061,30.3437884 19.8737584,31.5787519 17.4375392,33.5716412 C16.5467928,34.3002944 15.6201012,33.5583844 16.1601674,32.4473116 Z"
id="Closed-Eye"
transform="translate(27.000000, 30.000000) scale(1, -1) translate(-27.000000, -30.000000) "></path>
<path
d="M74.1601674,32.4473116 C76.006676,28.648508 80.1644225,26 84.9975803,26 C89.8136766,26 93.9591217,28.629842 95.8153518,32.4071242 C96.3667605,33.5291977 95.5821037,34.4474817 94.790607,33.7670228 C92.3395063,31.6597833 88.8587163,30.3437884 84.9975803,30.3437884 C81.2572061,30.3437884 77.8737584,31.5787519 75.4375392,33.5716412 C74.5467928,34.3002944 73.6201012,33.5583844 74.1601674,32.4473116 Z"
id="Closed-Eye"
transform="translate(85.000000, 30.000000) scale(1, -1) translate(-85.000000, -30.000000) "></path>
</g>
<g id="Eyes/Surprised-😳" transform="translate(0.000000, 8.000000)">
<circle id="The-White-Stuff" fill="#FFFFFF" cx="30" cy="22" r="14"></circle>
<circle id="Eye-Ball" fill="#FFFFFF" cx="82" cy="22" r="14"></circle>
<circle id="Eye" fill-opacity="0.699999988" fill="#000000" cx="30" cy="22" r="6"></circle>
<circle id="Eye" fill-opacity="0.699999988" fill="#000000" cx="82" cy="22" r="6"></circle>
</g>
<g id="Eyes/Default-😀" transform="translate(0.000000, 8.000000)" fill-opacity="0.599999964">
<circle id="Eye" cx="30" cy="22" r="6"></circle>
<circle id="Eye" cx="82" cy="22" r="6"></circle>
</g>
<g id="Eyes/Happy-😁" transform="translate(0.000000, 8.000000)" fill-opacity="0.599999964">
<path
d="M16.1601674,22.4473116 C18.006676,18.648508 22.1644225,16 26.9975803,16 C31.8136766,16 35.9591217,18.629842 37.8153518,22.4071242 C38.3667605,23.5291977 37.5821037,24.4474817 36.790607,23.7670228 C34.3395063,21.6597833 30.8587163,20.3437884 26.9975803,20.3437884 C23.2572061,20.3437884 19.8737584,21.5787519 17.4375392,23.5716412 C16.5467928,24.3002944 15.6201012,23.5583844 16.1601674,22.4473116 Z"
id="Squint"></path>
<path
d="M74.1601674,22.4473116 C76.006676,18.648508 80.1644225,16 84.9975803,16 C89.8136766,16 93.9591217,18.629842 95.8153518,22.4071242 C96.3667605,23.5291977 95.5821037,24.4474817 94.790607,23.7670228 C92.3395063,21.6597833 88.8587163,20.3437884 84.9975803,20.3437884 C81.2572061,20.3437884 77.8737584,21.5787519 75.4375392,23.5716412 C74.5467928,24.3002944 73.6201012,23.5583844 74.1601674,22.4473116 Z"
id="Squint"></path>
</g>
<g id="Eyebrow/Natural/Raised-Excited-Natural" fill-opacity="0.599999964">
<path
d="M22.7663531,1.57844898 L23.6772984,1.17582144 C28.9190996,-0.905265751 36.8645466,-0.0328729562 41.7227321,2.29911638 C42.2897848,2.57148957 41.9021563,3.4519421 41.3211012,3.40711006 C26.4021788,2.25602197 16.3582869,11.5525942 12.9460869,17.8470939 C12.8449215,18.0337142 12.5391523,18.05489 12.4635344,17.8808353 C10.156283,12.5620676 16.9134476,3.89614725 22.7663531,1.57844898 Z"
id="Eye-Browse-Reddit"></path>
<path
d="M80.7663531,1.57844898 L81.6772984,1.17582144 C86.9190996,-0.905265751 94.8645466,-0.0328729562 99.7227321,2.29911638 C100.289785,2.57148957 99.9021563,3.4519421 99.3211012,3.40711006 C84.4021788,2.25602197 74.3582869,11.5525942 70.9460869,17.8470939 C70.8449215,18.0337142 70.5391523,18.05489 70.4635344,17.8808353 C68.156283,12.5620676 74.9134476,3.89614725 80.7663531,1.57844898 Z"
id="Eye-Browse-Reddit"
transform="translate(85.000000, 9.000000) scale(-1, 1) translate(-85.000000, -9.000000) ">
</path>
</g>
</g>
<g id="Top" stroke-width="1" fill-rule="evenodd">
<defs>
<rect id="react-path-9" x="0" y="0" width="264" height="280"></rect>
<path
d="M180.14998,39.9204083 C177.390206,37.1003988 174.185913,34.7068297 171.069252,32.3065503 C170.381566,31.777442 169.682843,31.2610833 169.010544,30.7118441 C168.857687,30.5870323 167.291999,29.4657388 167.104691,29.0530544 C166.653816,28.0602634 166.915042,28.8332916 166.977255,27.6485857 C167.055857,26.150508 170.11064,21.9193194 167.831176,20.9490079 C166.828413,20.522232 165.039628,21.6579526 164.077671,22.0330592 C162.196235,22.7671676 160.291721,23.3932399 158.346734,23.9330847 C159.278588,22.0763407 161.055333,18.3594977 157.71591,19.3543018 C155.114345,20.1293431 152.690052,22.1219709 150.075777,23.0594018 C150.940735,21.6415124 154.399901,17.2479341 151.274209,17.0023366 C150.301549,16.925839 147.471201,18.7503735 146.423952,19.1395717 C143.287223,20.3054888 140.083264,21.0590571 136.789999,21.6525844 C125.59203,23.6707114 112.497238,23.0953019 102.1368,28.1934632 C94.1494796,32.1236942 86.262502,38.2220278 81.648386,45.987539 C77.2011742,53.472559 75.537818,61.6641751 74.6069673,70.2412987 C73.9239644,76.535909 73.8684412,83.0425652 74.1878671,89.3599905 C74.2922241,91.4297869 74.5250203,100.970847 77.5319724,98.0813859 C79.0300967,96.641688 79.019059,90.8282073 79.3963495,88.8604076 C80.1472513,84.9452748 80.870057,81.0126951 82.122006,77.2227096 C84.3282191,70.5439339 86.9307879,63.4296587 92.4269209,58.8297383 C95.9539853,55.8782066 98.4307906,51.8889248 101.806002,48.9112229 C103.322188,47.5738572 102.165231,47.7130963 104.602902,47.888571 C106.240504,48.006337 107.885464,48.0512961 109.52641,48.0942421 C113.322394,48.1928837 117.124399,48.16772 120.921387,48.1811407 C128.56821,48.208653 136.179243,48.316689 143.818708,47.9164188 C147.213653,47.7385955 150.617965,47.6423024 154.00388,47.3282597 C155.895349,47.152785 159.251496,45.9405668 160.808488,46.8669256 C162.233362,47.7144383 163.71309,50.4817719 164.736257,51.615144 C167.153525,54.2935659 170.035717,56.3392052 172.862385,58.5354911 C178.756547,63.114945 181.732392,68.8666908 183.522515,76.023241 C185.305949,83.1532854 184.805905,89.76815 187.013456,96.78479 C187.401784,98.0184813 188.428965,100.14498 189.695296,98.2389151 C189.930434,97.8849461 189.869559,95.9390277 189.869559,94.819339 C189.869559,90.2995934 191.014141,86.9083772 190.999758,82.3591197 C190.943566,68.5271489 190.49637,50.4908308 180.14998,39.9204083 Z"
id="react-path-8"></path>
<filter x="-0.8%" y="-2.0%" width="101.5%" height="108.0%" filterUnits="objectBoundingBox"
id="react-filter-5">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" type="matrix"
in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<mask id="react-mask-7" fill="white">
<use xlink:href="#react-path-9"></use>
</mask>
<g id="Mask"></g>
<g id="Top/Short-Hair/Short-Flat" mask="url(#react-mask-7)">
<g transform="translate(-1.000000, 0.000000)">
<g id="Facial-Hair/Beard-Medium" transform="translate(49.000000, 72.000000)">
<defs>
<path
d="M105.017591,94.1296214 C101.150441,99.7213834 98.257542,95.9467308 94.1374777,92.8762163 C91.6567227,91.0272796 87.9608129,88.7275108 84.5044337,88.8410391 C81.0477114,88.7275108 77.3518016,91.0272796 74.8710466,92.8762163 C70.7509822,95.9467308 67.8580835,99.7213834 63.9909333,94.1296214 C61.0884259,89.9323547 62.3028943,82.8739117 65.014944,78.9027173 C68.8738581,73.2512381 74.1088724,75.9847769 79.9622738,75.3400279 C81.5538829,75.1648137 83.1526985,74.7228407 84.5044337,74 C85.856169,74.7228407 87.4546414,75.1648137 89.0462504,75.3400279 C94.899995,75.9847769 100.134666,73.2512381 103.993923,78.9027173 C106.70563,82.8739117 107.920098,89.9323547 105.017591,94.1296214 M140.39109,26 C136.966521,40.0748212 135.393023,54.4337754 132.909944,68.6711471 C132.392536,71.6390145 131.826063,74.5963095 131.224594,77.5496398 C131.098329,78.1697764 130.973781,80.4725746 130.362704,80.7643064 C128.511632,81.6484223 124.739149,76.9466834 123.730409,75.8851496 C121.196893,73.219256 118.684993,70.5292442 115.599415,68.437233 C109.364783,64.2102603 102.065485,61.7108818 94.4700836,61.117837 C91.2922091,60.8693859 86.9951134,61.3025234 84.000116,63.1104016 C81.0051185,61.3025234 76.7080229,60.8693859 73.5298053,61.117837 C65.9344039,61.7108818 58.6351055,64.2102603 52.4004739,68.437233 C49.3148957,70.5292442 46.8033387,73.219256 44.2694796,75.8851496 C43.2607395,76.9466834 39.4882573,81.6484223 37.6371849,80.7643064 C37.0261079,80.4725746 36.9015594,78.1697764 36.7752954,77.5496398 C36.1738255,74.5963095 35.6073527,71.6390145 35.0899445,68.6711471 C32.6072086,54.4337754 31.0337113,40.0748212 27.6091415,26 C26.6127533,26 25.7385119,44.7478165 25.6273446,46.4945731 C25.174784,53.5889755 24.6463963,60.5254529 25.3216346,67.6261326 C26.485803,79.8749043 27.6993791,95.2339402 37.032627,104.58753 C45.4659003,113.039493 57.7103052,114.806417 68.2713185,120.141327 C69.631059,120.828202 71.4347824,121.676306 73.3798667,122.37111 C75.4289129,123.934171 79.4926946,125 84.1740722,125 C89.0846465,125 93.3155222,123.827456 95.2540874,122.137856 C96.9548781,121.49261 98.5180822,120.752874 99.7285704,120.141327 C110.288776,114.805245 122.533989,113.039493 130.967262,104.58753 C140.30051,95.2339402 141.514086,79.8749043 142.678597,67.6261326 C143.353493,60.5254529 142.825105,53.5889755 142.372887,46.4945731 C142.261377,44.7478165 141.387136,26 140.39109,26 Z"
id="react-path-11"></path>
</defs>
<mask id="react-mask-10" fill="white">
<use xlink:href="#react-path-11"></use>
</mask>
<use id="Beardness" fill="#252E32" fill-rule="evenodd" xlink:href="#react-path-11">
</use>
<g id="Color/Hair/Brown" mask="url(#react-mask-10)" fill="#4A312C">
<g transform="translate(-32.000000, 0.000000)" id="Color">
<rect x="0" y="0" width="264" height="244"></rect>
</g>
</g>
</g>
<mask id="react-mask-6" fill="white">
<use xlink:href="#react-path-8"></use>
</mask>
<use id="Short-Hair" stroke="none" fill="#1F3140" fill-rule="evenodd" xlink:href="#react-path-8">
</use>
<g id="Skin/👶🏽-03-Brown" mask="url(#react-mask-6)" fill="#4A312C">
<g transform="translate(0.000000, 0.000000) " id="Color">
<rect x="0" y="0" width="264" height="280"></rect>
</g>
</g>
<g id="Top/_Resources/Prescription-02" fill="none" transform="translate(62.000000, 85.000000)"
stroke-width="1">
<defs>
<filter x="-0.8%" y="-2.4%" width="101.5%" height="109.8%" filterUnits="objectBoundingBox"
id="react-filter-12">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1">
</feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix"
in="shadowOffsetOuter1" result="shadowMatrixOuter1">
</feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<!-- filter="url(#react-filter-12)" -->
<g id="Wayfarers" transform="translate(6.000000, 7.000000)"
fill="#252C2F">
<path
d="M34,41 L31.2421498,41 C17.3147125,41 9,33.3359286 9,20.5 C9,10.127 10.8170058,0 32.5299306,0 L35.4700694,0 C57.1829942,0 59,10.127 59,20.5 C59,32.5686429 48.7212748,41 34,41 Z M32.3853606,6 C13,6 13,12.8410159 13,21.5015498 C13,28.5719428 16.116254,37 30.9709365,37 L34,37 C46.3649085,37 55,30.6270373 55,21.5015498 C55,12.8410159 55,6 35.6146394,6 L32.3853606,6 Z"
id="Left" fill-rule="nonzero"></path>
<path
d="M96,41 L93.2421498,41 C79.3147125,41 71,33.3359286 71,20.5 C71,10.127 72.8170058,0 94.5299306,0 L97.4700694,0 C119.182994,0 121,10.127 121,20.5 C121,32.5686429 110.721275,41 96,41 Z M94.3853606,6 C75,6 75,12.8410159 75,21.5015498 C75,28.5719428 78.1194833,37 92.9709365,37 L96,37 C108.364909,37 117,30.6270373 117,21.5015498 C117,12.8410159 117,6 97.6146394,6 L94.3853606,6 Z"
id="Right" fill-rule="nonzero"></path>
<path
d="M2.95454545,5.77156439 C3.64590909,5.09629136 11.2095455,0 32.5,0 C50.3513636,0 54.1302273,1.85267217 59.8502273,4.6518809 L60.2689233,4.85850899 C60.6666014,4.99901896 62.7002447,5.68982981 65.0790606,5.76579519 C67.2462948,5.67278567 69.1000195,5.08540191 69.641698,4.89719767 C76.1703915,1.7220864 82.5610971,0 97.5,0 C118.790455,0 126.354091,5.09629136 127.045455,5.77156439 C128.679318,5.77156439 130,7.06150904 130,8.65734659 L130,11.5431288 C130,13.1389663 128.679318,14.428911 127.045455,14.428911 C127.045455,14.428911 120.143997,14.428911 120.143997,17.3146932 C120.143997,20.2004754 118.181818,13.1389663 118.181818,11.5431288 L118.181818,8.73240251 C114.578575,7.35340151 108.128411,4.78617535 97.5,4.78617535 C85.6584651,4.78617535 79.7610984,6.88602813 74.7022935,8.97112368 L74.7588636,9.10752861 L74.7563667,11.0937608 L72.5391666,16.4436339 L69.8004908,15.3608351 C69.5558969,15.2641292 69.0281396,15.090392 68.2963505,14.9099044 C66.256272,14.4067419 64.1589087,14.253569 62.3040836,14.6343084 C61.6235903,14.7739931 60.9922286,14.9836085 60.4128127,15.266732 L57.7704824,16.5578701 L55.1266751,11.3962031 L55.2440909,9.10175705 L55.3248203,8.90683855 C50.9620526,6.87386374 46.9392639,4.78617535 32.5,4.78617535 C21.8721459,4.78617535 15.422131,7.3524397 11.8181818,8.7314671 L11.8181818,11.5431288 C11.8181818,13.1389663 8.86363636,20.2004754 8.86363636,17.3146932 C8.86363636,14.428911 2.95454545,14.428911 2.95454545,14.428911 C1.32363636,14.428911 0,13.1389663 0,11.5431288 L0,8.65734659 C0,7.06150904 1.32363636,5.77156439 2.95454545,5.77156439 Z"
id="Stuff" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<div class="rpg-text-box" id="textbox">
<!-- Well... Hello there! My name is Neil. -->
<div id="quote">
</div>
</div>
</div>
<div class="start-btn">
<button id="start-btn">Talk to me</button>
</div>
<div class="my-mention">
<div>@thatkookooguy</div>
<div class="links">
<a href="https://stackoverflow.com/users/1788884/thatkookooguy" target="_blank" aria-label="See Profile on StackOverflow">
<div class="kb-logo stackoverflow"></div>
</a>
<a href="https://codepen.io/neilkalman/" target="_blank" aria-label="See Profile on CodePen">
<div class="kb-logo codepen"></div>
</a>
<a href="https://twitter.com/thatkookooguy" target="_blank" aria-label="See Profile on Twitter">
<div class="kb-logo twitter"></div>
</a>
<a href="https://github.com/thatkookooguy/" target="_blank" aria-label="See Profile on GitHub">
<div class="kb-logo github"></div>
</a>
<a href="https://www.twitch.tv/thatkookooguy" target="_blank" aria-label="See Profile on Twitch">
<div class="kb-logo twitch"></div>
</a>
</div>
</div>
<div class="avatar-mention">
Avatar created with <a href="https://getavataaars.com/" target="_blank">getavataaars.com</a>
</div>
<button class="toggle-audio" onclick="toggleAudio()" aria-label="Toggle Audio"><img src="https://simpleicons.org/icons/audiomack.svg"></button>
<svg class="hidden-svg">
<defs>
<filter id="fancy-goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</defs>
</svg>
<script src='https://acedio.github.io/animalese.js/riffwave.js'></script>
<script src='https://acedio.github.io/animalese.js/animalese.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js'></script>
<script src='https://assets.codepen.io/154887/SplitText.min.js'>
</script><script src="lib/index.js"></script>
</body>
</html>