Skip to content

Commit 3c954c0

Browse files
alexieyizhealexieyizhe
committed
feat: introduce layers for Illustration component
1 parent 52c5830 commit 3c954c0

File tree

2 files changed

+104
-56
lines changed

2 files changed

+104
-56
lines changed

src/components/MeIllustration.tsx renamed to src/components/MeIllustration/index.tsx

Lines changed: 9 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { styled } from 'goober';
33

44
import { useSiteContext } from 'services/site/context';
55

6+
import Layers from './layers';
7+
68
const Container = styled('svg')`
79
height: 280px;
810
@@ -11,67 +13,17 @@ const Container = styled('svg')`
1113
}
1214
`;
1315

14-
const WEIRD = (
15-
<g id="Face">
16-
<g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
17-
<path
18-
fill="#141414"
19-
transform="rotate(87)"
20-
d="M69.718 -56.79c.83-.15 1.84-.13 2.786.303.957.434 1.666 1.151 2.142 2.02.492.885.663 1.986.512 2.96-.143.982-.543 1.841-1.038 2.565l-.082.102c.692.421 1.31.95 1.787 1.572a7.053 7.053 0 011.418 3.382c.151 1.237-.019 2.61-.706 3.795-.669 1.191-1.778 2.078-2.899 2.553-1.128.488-2.25.645-3.31.686-2.119.045-4.042-.374-5.854-.932a2 2 0 111.178-3.823c1.558.49 3.136.792 4.547.757.695-.025 1.346-.136 1.838-.354.497-.217.812-.508 1.017-.854.211-.343.274-.813.223-1.314-.062-.504-.29-1.02-.606-1.435-.67-.824-1.578-1.164-2.695-.909a1.999 1.999 0 01-1.309-3.752l.084-.04c.97-.35 1.868-.9 2.435-1.584.581-.699.75-1.355.535-1.899-.299-.663-.685-1.032-1.654-1.005-.932.03-2.139.52-3.073 1.088l-.088.054a1.168 1.168 0 01-1.604-.39 1.173 1.173 0 01.285-1.53c1.217-.938 2.438-1.683 4.131-2.017z"
21-
/>
22-
<path
23-
fill="#141414"
24-
d="M47.718 57.79m-.988-30.767a1.04 1.04 0 012.066.15v.023c.088 2.496.404 5.017.897 7.425.252 1.183.573 2.404.985 3.306.1.215.218.398.278.46.015.018.016.004.02.013.005-.014-.073-.07-.019-.034l.262.166c.42.257.995.542 1.581.848 1.18.629 2.512 1.31 3.737 2.749.603.722 1.097 1.76 1.164 2.895.082 1.168-.338 2.299-.898 3.07-1.139 1.573-2.538 2.317-3.899 2.92a13.79 13.79 0 01-4.234 1.015 1.564 1.564 0 01-.563-3.055l.048-.014c1.111-.334 2.205-.745 3.172-1.283.954-.514 1.837-1.208 2.178-1.792.166-.295.196-.455.18-.588-.016-.167-.098-.357-.307-.64-.436-.58-1.42-1.205-2.486-1.838-.545-.326-1.12-.64-1.786-1.096a5.759 5.759 0 01-.526-.403 4.698 4.698 0 01-.376-.361c-.098-.12-.209-.251-.285-.366a5.878 5.878 0 01-.638-1.251c-.555-1.51-.725-2.856-.874-4.23-.249-2.722-.165-5.415.323-8.09zM21.3 29.626c3.308-4.286 9.469-1.602 9.483 3.13.005 1.921-2.138 3.87-4.074 4.323-4.556 1.067-8.273-3.74-5.408-7.453zm44.502-1.424c3.307-4.285 9.468-1.602 9.482 3.129.006 1.923-2.138 3.871-4.074 4.325-4.556 1.066-8.272-3.742-5.408-7.454zM23.074 15.556l.539.003c1.454.05 2.822.247 4.292.836a1.843 1.843 0 01-.448 3.54l-.25.031c-1.138.146-2.42.165-3.61.2-1.21.025-2.415.042-3.606.173-1.198.097-2.363.326-3.52.6-1.17.262-2.27.684-3.412 1.135l-.126.05a1.413 1.413 0 01-1.448-2.383c1.097-.955 2.327-1.816 3.666-2.417a18.623 18.623 0 014.16-1.35c1.424-.268 2.865-.448 4.302-.415zm41.342-.396c1.303-.209 2.64-.186 3.97-.087a15.36 15.36 0 013.93.88c1.275.448 2.463 1.162 3.508 1.99a1.416 1.416 0 01-1.255 2.477l-.159-.044c-1.055-.29-2.044-.59-3.092-.708-1.035-.134-2.07-.224-3.126-.182-1.052.002-2.105.14-3.165.244-1.042.096-2.18.228-3.186.201l-.309-.008a1.844 1.844 0 01-1.794-1.893 1.864 1.864 0 01.89-1.529c1.262-.762 2.47-1.114 3.788-1.34z"
25-
/>
26-
</g>
27-
</g>
28-
);
29-
30-
const SURPRISED = (
31-
<g
32-
id="Face/Surprise"
33-
fill="none"
34-
fillRule="evenodd"
35-
stroke="none"
36-
strokeWidth="1"
37-
>
38-
<g id="Surprise" transform="translate(5 13)">
39-
<path
40-
id="Face"
41-
fill="#141414"
42-
d="M43.886 56.47c4.332-.626 8.175 1.154 8.583 3.977.409 2.822-2.772 5.618-7.104 6.245-4.333.627-8.176-1.154-8.584-3.976-.408-2.822 2.772-5.62 7.105-6.245zm.839-27.149l.126.005a1.24 1.24 0 011.125 1.115c.165 1.735.334 3.469.582 5.106.063.406.137.804.224 1.168.035.165.09.344.14.485.173.09.346.179.517.285.461.28.913.62 1.335 1.033.841.79 1.588 2.01 1.668 3.415.092 1.407-.53 2.733-1.378 3.605-.855.892-1.916 1.435-2.987 1.714a7.559 7.559 0 01-1.613.234c-.532.002-1.076.076-1.56-.253a1.401 1.401 0 01.006-2.324l.267-.176c.388-.258.722-.13 1.064-.21.338-.047.668-.114.97-.228.608-.21 1.137-.547 1.471-.95.345-.401.471-.82.425-1.174-.045-.354-.252-.756-.702-1.136a4.2 4.2 0 00-.77-.531 4.33 4.33 0 00-.455-.24l-.118-.057-.09-.044a2.37 2.37 0 01-.403-.253c-.41-.35-.524-.601-.654-.826-.373-.8-.382-1.265-.47-1.785a19.154 19.154 0 01-.117-1.438c-.076-1.854.026-3.631.182-5.41a1.236 1.236 0 011.341-1.125zM13.11 24.654c.408-2.822 2.807-4.811 5.358-4.442 2.551.369 4.288 2.957 3.88 5.779-.408 2.822-2.807 4.81-5.359 4.442-2.55-.37-4.287-2.956-3.879-5.78zm50.21-6.168c2.552-.37 4.95 1.62 5.359 4.442.409 2.823-1.328 5.41-3.88 5.779-2.55.369-4.95-1.62-5.358-4.442-.408-2.823 1.329-5.41 3.88-5.78zM17.806.975a3.003 3.003 0 11-.193 5.998c-2.68-.185-5.429.556-7.923 2.076-1.252.75-2.432 1.69-3.516 2.766-1.08 1.083-2.093 2.259-3.202 3.447l-.034.036a1.697 1.697 0 01-2.84-1.727c.61-1.71 1.556-3.288 2.703-4.73a23.434 23.434 0 013.966-3.98 18.977 18.977 0 015.097-2.84C13.73 1.33 15.756.985 17.78.976zM60.552 0c.183-.006.38.007.557.032 1.712.255 3.438.535 5.18.932 1.74.401 3.494.968 5.21 1.765 1.707.8 3.399 1.855 4.749 3.265a13.665 13.665 0 012.997 4.761 1.907 1.907 0 01-3.367 1.73l-.02-.03c-1.664-2.475-3.594-4.259-6.242-5.2-1.316-.468-2.771-.699-4.264-.85a35.101 35.101 0 00-4.607-.135 3.136 3.136 0 01-.193-6.27z"
43-
/>
44-
</g>
45-
</g>
46-
);
47-
48-
const GRIN_HAPPY = (
49-
<g
50-
id="Face/Grinning"
51-
fill="none"
52-
fillRule="evenodd"
53-
stroke="none"
54-
strokeWidth="1"
55-
>
56-
<g id="grinning" transform="translate(9 8)">
57-
<path
58-
id="face"
59-
fill="#141414"
60-
d="M22.608 57.68c12.874 5.516 33.455-7.377 42.783-1.281 13.252 23.89-71.788 23.292-47.306.63 1.58-.565 3.086.079 4.523.652zm19.737 3.945c-2.049.35-4.122.652-6.204.83.111 2.922.12 5.843-.19 8.752a67.73 67.73 0 006.621-.256c.328-.032.658-.071.986-.108-1.2-2.827-1.447-6.167-1.213-9.218zm-13.903.894c.144.176-.634 7.694-.744 7.963 2.061.372 4.145.572 6.245.67-.105-2.863.107-5.716.41-8.563a40.128 40.128 0 01-5.91-.07zm20.946-2.271c-1.76.377-3.538.736-5.333 1.069 1.075 2.206.844 4.824 1.084 7.224-.014.706.165 1.392-.232 2.138 2.34-.31 4.658-.752 6.9-1.372-2.08-2.26-1.767-6.136-2.419-9.06zM25.681 62.14c-2.246.122-5.835-2.791-7.366-1.35-1.785 1.888-1.569 5.499.892 6.802 1.614 1.103 3.656 1.776 5.59 2.275.058-.166.66-7.9.884-7.727zm30.753-3.302a88.55 88.55 0 00-4.449.848c.73 2.898 2.288 6.032 1.795 9.018a34.759 34.759 0 002.21-.808 24.176 24.176 0 002.195-1.063 68.635 68.635 0 01-1.75-7.995zm4.985 5.668c3.3-3.806 1.917-7.046-3.272-5.904a69.92 69.92 0 011.662 7.229c.584-.411 1.138-.843 1.61-1.325zM39.315 33.395c-.402-1.874-2.343-22.484 2.266-15.646.463 5.006.573 10.164 1.634 15.051 10.893 4.148 6.794 16.694-4.284 15.435-2.571.031-2.584-4.01-.018-4 2.163-.052 5.402-.334 6.354-2.218 1.573-5.51-5.642-4.23-5.952-8.622zM8.158 23.108c2.21-3.033 5.932-5.192 9.86-4.82 8.025.626 7.447 8.536 2.346 5.736-.687-.794-1.654-1.33-2.8-1.5-7.452-.948-7.322 8.628-10.772 7.52-2.65-1.563.32-5.04 1.366-6.936zm50.9-11.895c3.704-1.006 14.433 4.158 10.2 8.416a1.972 1.972 0 01-2.492-.646c-3.695-5.437-11.728-4.263-15.544.576a1.453 1.453 0 01-2.053.04c-1.489-3.963 6.29-8.264 9.89-8.386zM.657 7.986c2.447-2.719 15.736-4.907 15.967-.122-.823 1.691-3.223.702-4.697 1.18-3.358.293-6.547 1.726-9.854 2.2C.276 11.54-.748 9.074.657 7.986zm51.448-3.117C46.39 3.166 56.107-.568 58.379.073 61.287-.595 70.53 3.7 64.274 5.687c-4.035-.67-8.06-2.083-12.17-.818z"
61-
/>
62-
</g>
63-
</g>
64-
);
16+
const SantaHat = memo(() => Layers.SANTA_HAT);
6517

66-
const MeIllustration: FC = memo(() => {
18+
const MeIllustration: FC = () => {
6719
const { isHoveringLink } = useSiteContext();
6820
const [, setNumClicks] = useState(0);
6921
const [isHovering, setHovering] = useState(false);
7022
const expression = isHoveringLink
71-
? SURPRISED
23+
? Layers.SURPRISED
7224
: isHovering
73-
? WEIRD
74-
: GRIN_HAPPY;
25+
? Layers.WEIRD
26+
: Layers.GRIN_HAPPY;
7527

7628
const onIllustrationClick = () =>
7729
setNumClicks((prev) => {
@@ -274,9 +226,10 @@ const MeIllustration: FC = memo(() => {
274226
/>
275227
</g>
276228
</g>
229+
<SantaHat />
277230
</g>
278231
</Container>
279232
);
280-
});
233+
};
281234

282235
export default MeIllustration;

‎src/components/MeIllustration/layers.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import 'react';
2+
3+
const WEIRD = (
4+
<g id="Face">
5+
<g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
6+
<path
7+
fill="#141414"
8+
transform="rotate(87)"
9+
d="M69.718 -56.79c.83-.15 1.84-.13 2.786.303.957.434 1.666 1.151 2.142 2.02.492.885.663 1.986.512 2.96-.143.982-.543 1.841-1.038 2.565l-.082.102c.692.421 1.31.95 1.787 1.572a7.053 7.053 0 011.418 3.382c.151 1.237-.019 2.61-.706 3.795-.669 1.191-1.778 2.078-2.899 2.553-1.128.488-2.25.645-3.31.686-2.119.045-4.042-.374-5.854-.932a2 2 0 111.178-3.823c1.558.49 3.136.792 4.547.757.695-.025 1.346-.136 1.838-.354.497-.217.812-.508 1.017-.854.211-.343.274-.813.223-1.314-.062-.504-.29-1.02-.606-1.435-.67-.824-1.578-1.164-2.695-.909a1.999 1.999 0 01-1.309-3.752l.084-.04c.97-.35 1.868-.9 2.435-1.584.581-.699.75-1.355.535-1.899-.299-.663-.685-1.032-1.654-1.005-.932.03-2.139.52-3.073 1.088l-.088.054a1.168 1.168 0 01-1.604-.39 1.173 1.173 0 01.285-1.53c1.217-.938 2.438-1.683 4.131-2.017z"
10+
/>
11+
<path
12+
fill="#141414"
13+
d="M47.718 57.79m-.988-30.767a1.04 1.04 0 012.066.15v.023c.088 2.496.404 5.017.897 7.425.252 1.183.573 2.404.985 3.306.1.215.218.398.278.46.015.018.016.004.02.013.005-.014-.073-.07-.019-.034l.262.166c.42.257.995.542 1.581.848 1.18.629 2.512 1.31 3.737 2.749.603.722 1.097 1.76 1.164 2.895.082 1.168-.338 2.299-.898 3.07-1.139 1.573-2.538 2.317-3.899 2.92a13.79 13.79 0 01-4.234 1.015 1.564 1.564 0 01-.563-3.055l.048-.014c1.111-.334 2.205-.745 3.172-1.283.954-.514 1.837-1.208 2.178-1.792.166-.295.196-.455.18-.588-.016-.167-.098-.357-.307-.64-.436-.58-1.42-1.205-2.486-1.838-.545-.326-1.12-.64-1.786-1.096a5.759 5.759 0 01-.526-.403 4.698 4.698 0 01-.376-.361c-.098-.12-.209-.251-.285-.366a5.878 5.878 0 01-.638-1.251c-.555-1.51-.725-2.856-.874-4.23-.249-2.722-.165-5.415.323-8.09zM21.3 29.626c3.308-4.286 9.469-1.602 9.483 3.13.005 1.921-2.138 3.87-4.074 4.323-4.556 1.067-8.273-3.74-5.408-7.453zm44.502-1.424c3.307-4.285 9.468-1.602 9.482 3.129.006 1.923-2.138 3.871-4.074 4.325-4.556 1.066-8.272-3.742-5.408-7.454zM23.074 15.556l.539.003c1.454.05 2.822.247 4.292.836a1.843 1.843 0 01-.448 3.54l-.25.031c-1.138.146-2.42.165-3.61.2-1.21.025-2.415.042-3.606.173-1.198.097-2.363.326-3.52.6-1.17.262-2.27.684-3.412 1.135l-.126.05a1.413 1.413 0 01-1.448-2.383c1.097-.955 2.327-1.816 3.666-2.417a18.623 18.623 0 014.16-1.35c1.424-.268 2.865-.448 4.302-.415zm41.342-.396c1.303-.209 2.64-.186 3.97-.087a15.36 15.36 0 013.93.88c1.275.448 2.463 1.162 3.508 1.99a1.416 1.416 0 01-1.255 2.477l-.159-.044c-1.055-.29-2.044-.59-3.092-.708-1.035-.134-2.07-.224-3.126-.182-1.052.002-2.105.14-3.165.244-1.042.096-2.18.228-3.186.201l-.309-.008a1.844 1.844 0 01-1.794-1.893 1.864 1.864 0 01.89-1.529c1.262-.762 2.47-1.114 3.788-1.34z"
14+
/>
15+
</g>
16+
</g>
17+
);
18+
19+
const SURPRISED = (
20+
<g
21+
id="Face/Surprise"
22+
fill="none"
23+
fillRule="evenodd"
24+
stroke="none"
25+
strokeWidth="1"
26+
>
27+
<g id="Surprise" transform="translate(5 13)">
28+
<path
29+
id="Face"
30+
fill="#141414"
31+
d="M43.886 56.47c4.332-.626 8.175 1.154 8.583 3.977.409 2.822-2.772 5.618-7.104 6.245-4.333.627-8.176-1.154-8.584-3.976-.408-2.822 2.772-5.62 7.105-6.245zm.839-27.149l.126.005a1.24 1.24 0 011.125 1.115c.165 1.735.334 3.469.582 5.106.063.406.137.804.224 1.168.035.165.09.344.14.485.173.09.346.179.517.285.461.28.913.62 1.335 1.033.841.79 1.588 2.01 1.668 3.415.092 1.407-.53 2.733-1.378 3.605-.855.892-1.916 1.435-2.987 1.714a7.559 7.559 0 01-1.613.234c-.532.002-1.076.076-1.56-.253a1.401 1.401 0 01.006-2.324l.267-.176c.388-.258.722-.13 1.064-.21.338-.047.668-.114.97-.228.608-.21 1.137-.547 1.471-.95.345-.401.471-.82.425-1.174-.045-.354-.252-.756-.702-1.136a4.2 4.2 0 00-.77-.531 4.33 4.33 0 00-.455-.24l-.118-.057-.09-.044a2.37 2.37 0 01-.403-.253c-.41-.35-.524-.601-.654-.826-.373-.8-.382-1.265-.47-1.785a19.154 19.154 0 01-.117-1.438c-.076-1.854.026-3.631.182-5.41a1.236 1.236 0 011.341-1.125zM13.11 24.654c.408-2.822 2.807-4.811 5.358-4.442 2.551.369 4.288 2.957 3.88 5.779-.408 2.822-2.807 4.81-5.359 4.442-2.55-.37-4.287-2.956-3.879-5.78zm50.21-6.168c2.552-.37 4.95 1.62 5.359 4.442.409 2.823-1.328 5.41-3.88 5.779-2.55.369-4.95-1.62-5.358-4.442-.408-2.823 1.329-5.41 3.88-5.78zM17.806.975a3.003 3.003 0 11-.193 5.998c-2.68-.185-5.429.556-7.923 2.076-1.252.75-2.432 1.69-3.516 2.766-1.08 1.083-2.093 2.259-3.202 3.447l-.034.036a1.697 1.697 0 01-2.84-1.727c.61-1.71 1.556-3.288 2.703-4.73a23.434 23.434 0 013.966-3.98 18.977 18.977 0 015.097-2.84C13.73 1.33 15.756.985 17.78.976zM60.552 0c.183-.006.38.007.557.032 1.712.255 3.438.535 5.18.932 1.74.401 3.494.968 5.21 1.765 1.707.8 3.399 1.855 4.749 3.265a13.665 13.665 0 012.997 4.761 1.907 1.907 0 01-3.367 1.73l-.02-.03c-1.664-2.475-3.594-4.259-6.242-5.2-1.316-.468-2.771-.699-4.264-.85a35.101 35.101 0 00-4.607-.135 3.136 3.136 0 01-.193-6.27z"
32+
/>
33+
</g>
34+
</g>
35+
);
36+
37+
const GRIN_HAPPY = (
38+
<g
39+
id="Face/Grinning"
40+
fill="none"
41+
fillRule="evenodd"
42+
stroke="none"
43+
strokeWidth="1"
44+
>
45+
<g id="grinning" transform="translate(9 8)">
46+
<path
47+
id="face"
48+
fill="#141414"
49+
d="M22.608 57.68c12.874 5.516 33.455-7.377 42.783-1.281 13.252 23.89-71.788 23.292-47.306.63 1.58-.565 3.086.079 4.523.652zm19.737 3.945c-2.049.35-4.122.652-6.204.83.111 2.922.12 5.843-.19 8.752a67.73 67.73 0 006.621-.256c.328-.032.658-.071.986-.108-1.2-2.827-1.447-6.167-1.213-9.218zm-13.903.894c.144.176-.634 7.694-.744 7.963 2.061.372 4.145.572 6.245.67-.105-2.863.107-5.716.41-8.563a40.128 40.128 0 01-5.91-.07zm20.946-2.271c-1.76.377-3.538.736-5.333 1.069 1.075 2.206.844 4.824 1.084 7.224-.014.706.165 1.392-.232 2.138 2.34-.31 4.658-.752 6.9-1.372-2.08-2.26-1.767-6.136-2.419-9.06zM25.681 62.14c-2.246.122-5.835-2.791-7.366-1.35-1.785 1.888-1.569 5.499.892 6.802 1.614 1.103 3.656 1.776 5.59 2.275.058-.166.66-7.9.884-7.727zm30.753-3.302a88.55 88.55 0 00-4.449.848c.73 2.898 2.288 6.032 1.795 9.018a34.759 34.759 0 002.21-.808 24.176 24.176 0 002.195-1.063 68.635 68.635 0 01-1.75-7.995zm4.985 5.668c3.3-3.806 1.917-7.046-3.272-5.904a69.92 69.92 0 011.662 7.229c.584-.411 1.138-.843 1.61-1.325zM39.315 33.395c-.402-1.874-2.343-22.484 2.266-15.646.463 5.006.573 10.164 1.634 15.051 10.893 4.148 6.794 16.694-4.284 15.435-2.571.031-2.584-4.01-.018-4 2.163-.052 5.402-.334 6.354-2.218 1.573-5.51-5.642-4.23-5.952-8.622zM8.158 23.108c2.21-3.033 5.932-5.192 9.86-4.82 8.025.626 7.447 8.536 2.346 5.736-.687-.794-1.654-1.33-2.8-1.5-7.452-.948-7.322 8.628-10.772 7.52-2.65-1.563.32-5.04 1.366-6.936zm50.9-11.895c3.704-1.006 14.433 4.158 10.2 8.416a1.972 1.972 0 01-2.492-.646c-3.695-5.437-11.728-4.263-15.544.576a1.453 1.453 0 01-2.053.04c-1.489-3.963 6.29-8.264 9.89-8.386zM.657 7.986c2.447-2.719 15.736-4.907 15.967-.122-.823 1.691-3.223.702-4.697 1.18-3.358.293-6.547 1.726-9.854 2.2C.276 11.54-.748 9.074.657 7.986zm51.448-3.117C46.39 3.166 56.107-.568 58.379.073 61.287-.595 70.53 3.7 64.274 5.687c-4.035-.67-8.06-2.083-12.17-.818z"
50+
/>
51+
</g>
52+
</g>
53+
);
54+
55+
const SANTA_HAT = (
56+
<g
57+
id="Head/Add On"
58+
transform="translate(414.000000, 35.000000) scale(1 1)"
59+
width="180"
60+
height="160"
61+
>
62+
<g
63+
id="Head/Add On/Christmas Hat 1"
64+
stroke="none"
65+
stroke-width="1"
66+
fill="none"
67+
fill-rule="evenodd"
68+
>
69+
<g id="Group" transform="translate(8.000062, 19.000239)">
70+
<path
71+
d="M17.9999381,23.4609825 C17.9999381,23.4609825 32.2160143,20.0277194 28.1086703,55.7325398 C26.4059746,70.5296249 19.4621689,101.257051 39.8136797,113.999761 C42.1395374,106.103814 108.235645,86.4856457 137.182495,89.8697825 C166.129344,93.2539193 174.999938,94.7612056 174.999938,94.7612056 C174.999938,94.7612056 161.184978,60.1896411 139.608631,43.3560448 C99.1112838,11.7622081 49.0485524,17.3860606 28.6305301,17.3894102 C20.87733,16.828923 17.9999381,23.4609825 17.9999381,23.4609825"
72+
id="red-fill"
73+
fill="#FF4B33"
74+
/>
75+
<path
76+
d="M27.9999381,14.9997609 C27.9999381,22.1792111 22.1801529,27.9997609 14.9999381,27.9997609 C7.81972329,27.9997609 1.99993807,22.1792111 1.99993807,14.9997609 C1.99993807,7.82031068 7.81972329,1.99976088 14.9999381,1.99976088 C22.1801529,1.99976088 27.9999381,7.82031068 27.9999381,14.9997609"
77+
id="white-fill"
78+
fill="#FFF"
79+
/>
80+
<path
81+
d="M39.9902784,113.839595 C36.4435494,119.562151 34.3065226,126.848448 37.7276042,132.582165 C42.1262836,139.954407 55.9515803,140.656472 69.3876766,129.318511 C81.803271,118.842227 101.797547,110.032371 107.109468,108.323529 C132.563786,100.133142 143.484892,101.63103 160.216423,113.839595 C168.928995,120.19613 175.316581,116.523962 177.155323,110.24779 C179.519128,102.177948 177.16043,89.3354035 167.032026,81.9575815 C132.01625,56.4521938 58.0916717,84.628554 39.9902784,113.839595"
82+
id="white-fill"
83+
fill="#FFF"
84+
/>
85+
<path
86+
d="M176.222224,105.979807 C175.987386,113.81629 169.79854,117.452498 163.597388,113.641698 C158.919092,110.782199 154.592539,107.238882 149.537888,105.020672 C139.353723,99.9396046 127.449808,100.633495 116.951843,103.402341 C102.713907,106.708392 89.4881318,113.295872 76.9617427,121.228604 C68.1876301,126.879332 60.1785348,135.843946 49.3811258,136.049875 C36.6732245,136.68221 34.4694415,124.952108 41.1197594,114.952255 C49.2180725,102.692782 62.0367269,94.6593239 74.4595413,88.268819 C99.6958827,76.3070471 129.438237,68.5019015 156.296908,78.1480945 C167.502463,82.117818 177.536905,92.1758685 176.222224,105.979807 M32.3118055,104.224936 C17.36628,81.003117 38.7119033,45.97733 25.5835502,24.7017608 C27.147426,22.9155531 28.3011049,20.686151 28.8794826,18.2877531 C67.737439,16.5149756 110.005157,19.2256241 141.609806,46.7383708 C151.292505,55.4097601 158.855511,66.6149678 165.250482,78.3327589 C130.416557,57.3381033 63.5185634,78.5901697 39.0646727,111.169434 C36.4230044,109.360843 34.1187231,107.003855 32.3118055,104.224936 M14.6907704,25.7907208 C-0.526510659,25.5209989 -0.498822365,3.20347533 14.6907704,2.75692341 C29.8731847,3.1396822 29.9172809,25.4527291 14.6907704,25.7907208 M179.64942,100.073906 C178.726477,92.7936546 175.066494,86.0080799 169.749316,81.5201771 C166.922034,71.401691 157.230106,59.0067974 150.116265,50.8278463 C147.432552,47.7859212 144.174563,44.7663796 141.06527,42.2403954 C109.017608,16.5172139 67.6441191,13.766275 29.2732717,15.6196333 C30.175705,1.98804829 13.3976245,-4.86915382 4.72298471,3.94213265 C-8.61764534,17.3409287 9.11824494,37.1783544 23.0885273,26.9703341 C36.8711446,48.0041609 8.89161113,92.5888451 37.074192,114.364687 C29.771661,126.845757 35.0201309,140.790712 49.5093123,139.964759 C61.1076309,139.761068 69.4920564,130.776309 78.799425,124.592852 C84.8364985,120.663419 91.2130099,117.275668 97.6982236,114.228147 C110.410227,108.549439 124.605092,103.862323 138.312848,105.569069 C147.131057,106.702796 154.553571,112.310996 162.014028,117.157035 C173.768221,123.800474 181.807056,112.614293 179.64942,100.073906"
87+
id="ink"
88+
fill="#141414"
89+
/>
90+
</g>
91+
</g>
92+
</g>
93+
);
94+
95+
export default { WEIRD, SURPRISED, GRIN_HAPPY, SANTA_HAT };

0 commit comments

Comments
 (0)