-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
78 lines (77 loc) · 12.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./css/base.css" />
<link rel="stylesheet" href="./css/normalize.css" />
<title>Quazavr animation</title>
</head>
<body>
<div class="container">
<div class="container_image">
<div class="container_dialog quazavr"></div>
<div class="container_svg">
<svg width="181" height="234" viewBox="0 0 181 234" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="quasavrContainer">
<g id="quazavr">
<path id="rightFlipper" d="M104.03 177.009C96.8298 187.415 93.0347 198.795 92.6599 211.116C92.6278 212.171 93.6161 212.963 94.6412 212.704C105.591 209.94 113.854 205.599 119.398 199.647L119.624 199.401C125.123 193.303 125.83 185.169 121.872 175.255L121.727 174.898L121.743 174.941C118.306 164.859 111.68 165.953 104.03 177.009Z" fill="#118286"/>
<g id="body">
<g id="spikes">
<path id="spike6" d="M27.0782 149.905C25.0738 153.502 26.5144 157.067 30.137 160.438C31.1967 161.424 32.3812 162.342 33.7624 163.293L34.5059 163.795C35.1712 164.235 36.2857 164.956 36.3687 165.011C38.2412 166.261 40.0822 165.223 41.6658 162.83C42.9141 160.944 44.2527 157.916 45.7183 153.705C45.9199 153.125 45.7726 152.481 45.3388 152.048L44.8578 151.573C37.1106 144.037 30.8212 143.188 27.0782 149.905Z" fill="#199BA0"/>
<path id="spike5" d="M46.2549 130.726C42.6843 132.777 42.0829 136.575 43.452 141.33C43.8525 142.721 44.3947 144.119 45.0889 145.645L45.4677 146.458C45.8115 147.178 46.3954 148.37 46.438 148.46C47.3995 150.496 49.5119 150.554 52.1018 149.319C54.1433 148.345 56.8505 146.439 60.2756 143.584C60.7468 143.191 60.9522 142.563 60.8037 141.968L60.6359 141.313C57.8763 130.864 52.923 126.896 46.2549 130.726Z" fill="#199BA0"/>
<path id="spike4" d="M68.3063 122.182C64.3659 123.377 62.9256 126.942 63.1899 131.884C63.2673 133.329 63.4812 134.813 63.8142 136.456L64.0005 137.333C64.1736 138.112 64.4743 139.405 64.4955 139.502C64.9745 141.702 67.0196 142.234 69.821 141.613C72.0292 141.124 75.0959 139.875 79.0754 137.864C79.6229 137.587 79.9642 137.022 79.9535 136.408L79.9372 135.733C79.599 124.93 75.6651 119.95 68.3063 122.182Z" fill="#199BA0"/>
<path id="spike3" d="M156.603 86.786C156.325 82.6777 153.175 80.4723 148.301 79.6184C146.875 79.3686 145.381 79.2432 143.705 79.1981L142.808 79.1822C142.011 79.1757 140.683 79.1778 140.583 79.1766C138.332 79.1485 137.354 81.0214 137.329 83.8908C137.309 86.1525 137.836 89.4215 138.9 93.7514C139.047 94.3472 139.521 94.8069 140.121 94.9344L140.783 95.0705C151.385 97.171 157.122 94.4582 156.603 86.786Z" fill="#199BA0"/>
<path id="spike2" d="M156.746 66.84C156.04 62.7832 152.677 60.9191 147.741 60.5794C146.297 60.48 144.798 60.5115 143.126 60.6418L142.233 60.7197C141.439 60.7966 140.119 60.9375 140.02 60.9467C137.778 61.1541 137 63.119 137.275 65.9753C137.492 68.2266 138.358 71.4227 139.869 75.6176C140.077 76.1948 140.597 76.6024 141.207 76.6665L141.879 76.7327C152.642 77.7135 158.065 74.4159 156.746 66.84Z" fill="#199BA0"/>
<path id="spike1" d="M143.757 43.9787C140.431 41.551 136.717 42.5463 132.93 45.7312C131.822 46.6628 130.766 47.7265 129.654 48.9815L129.065 49.6583C128.547 50.2651 127.696 51.2834 127.631 51.3589C126.162 53.0653 126.968 55.019 129.15 56.8825C130.87 58.3513 133.713 60.049 137.714 62.0168C138.264 62.2876 138.921 62.2198 139.405 61.8422L139.934 61.4225C148.358 54.6514 149.968 48.5125 143.757 43.9787Z" fill="#199BA0"/>
</g>
<path id="bodyMain" d="M94.3837 46.907C86.2643 49.7562 84.6882 58.112 84.6882 71.7739L84.6923 72.3049C84.9524 89.0072 97.5647 94.3964 121.308 88.6549L122.209 88.4326C118.937 122.208 116.062 140.149 113.582 142.256C113.496 142.329 109.322 146.124 103.295 142.158C97.267 138.192 79.0902 128.701 55.0315 139.91C48.1139 143.132 43.7926 148.905 40.3677 154.493C36.9428 160.08 36.7295 160.513 33.0268 173.983C29.3242 187.453 12.4787 186.705 12.4787 180.419C12.4787 174.134 18.1099 174.104 20.555 174.796C23.0001 175.489 23.9001 173.843 21.7504 171.289C19.6006 168.735 9.86298 169.033 6.07703 171.289C2.29108 173.545 -1.48005 178.353 0.585909 185.738C2.65186 193.124 11.7624 195.281 17.7409 196.772C23.7194 198.262 32.5228 198.521 38.3184 198.847C44.1141 199.173 75.4195 203.895 90.3419 199.952C105.264 196.009 115.64 188.584 120.766 183.101C125.892 177.618 129.336 170.631 132.707 161.243C134.954 154.984 137.817 135.622 141.297 103.157C143.135 82.5661 143.599 67.7967 142.126 61.4755C140.573 54.807 134.829 50.6245 126.239 48.3663C117.648 46.1081 102.503 44.0577 94.3837 46.907Z" fill="#30ADB2"/>
<path id="tummy" d="M122.789 180.792C95.3547 214.694 43.7442 198.546 36.0539 198.744C39.7603 193.51 47.0435 192.828 71.3212 190.229C84.0208 188.869 88.6635 179.557 98.4224 175.184C108.992 170.448 122.828 178.564 122.789 180.792Z" fill="#4EC5CA"/>
<path id="bodyFreckles" d="M49 159.515C49.5523 159.515 50 159.962 50 160.515C50 161.067 49.5523 161.515 49 161.515C48.4477 161.515 48 161.067 48 160.515C48 159.962 48.4477 159.515 49 159.515ZM65.5 151.515C66.8807 151.515 68 152.634 68 154.015C68 155.395 66.8807 156.515 65.5 156.515C64.1193 156.515 63 155.395 63 154.015C63 152.634 64.1193 151.515 65.5 151.515ZM53 147.515C54.6569 147.515 56 148.858 56 150.515C56 152.172 54.6569 153.515 53 153.515C51.3431 153.515 50 152.172 50 150.515C50 148.858 51.3431 147.515 53 147.515ZM70.5 142.515C71.3284 142.515 72 143.186 72 144.015C72 144.843 71.3284 145.515 70.5 145.515C69.6716 145.515 69 144.843 69 144.015C69 143.186 69.6716 142.515 70.5 142.515ZM60 141.515C60.5523 141.515 61 141.962 61 142.515C61 143.067 60.5523 143.515 60 143.515C59.4477 143.515 59 143.067 59 142.515C59 141.962 59.4477 141.515 60 141.515ZM81 138.515C82.1046 138.515 83 139.41 83 140.515C83 141.619 82.1046 142.515 81 142.515C79.8954 142.515 79 141.619 79 140.515C79 139.41 79.8954 138.515 81 138.515Z" fill="#68E0E5"/>
<path id="noseFreckles" d="M93 57.5147C94.6569 57.5147 96 59.0817 96 61.0147C96 62.9477 94.6569 64.5147 93 64.5147C91.3431 64.5147 90 62.9477 90 61.0147C90 59.0817 91.3431 57.5147 93 57.5147ZM102.5 58.5147C103.881 58.5147 105 59.634 105 61.0147C105 62.3954 103.881 63.5147 102.5 63.5147C101.119 63.5147 100 62.3954 100 61.0147C100 59.634 101.119 58.5147 102.5 58.5147ZM100.5 51.5147C101.328 51.5147 102 52.1863 102 53.0147C102 53.8431 101.328 54.5147 100.5 54.5147C99.6716 54.5147 99 53.8431 99 53.0147C99 52.1863 99.6716 51.5147 100.5 51.5147Z" fill="#68E0E5"/>
<g id="eye">
<path id="eyeLid" d="M118.5 76.5147C121.538 76.5147 124 74.0523 124 71.0147C124 67.9771 121.538 65.5147 118.5 65.5147C115.462 65.5147 113 67.9771 113 71.0147C113 74.0523 115.462 76.5147 118.5 76.5147Z" fill="#199BA0" stroke="#199BA0" stroke-width="4"/>
<path id="eye4" d="M118.5 76.5147C121.538 76.5147 124 74.0523 124 71.0147C124 67.9771 121.538 65.5147 118.5 65.5147C115.462 65.5147 113 67.9771 113 71.0147C113 74.0523 115.462 76.5147 118.5 76.5147Z" stroke="white" stroke-width="4"/>
<path id="eyePupil3" d="M119 75.5147C121.761 75.5147 124 73.2761 124 70.5147C124 67.7533 121.761 65.5147 119 65.5147C116.239 65.5147 114 67.7533 114 70.5147C114 73.2761 116.239 75.5147 119 75.5147Z" fill="#195A52"/>
<path id="eyePupil2" d="M115 69.5147C115.552 69.5147 116 69.067 116 68.5147C116 67.9624 115.552 67.5147 115 67.5147C114.448 67.5147 114 67.9624 114 68.5147C114 69.067 114.448 69.5147 115 69.5147Z" fill="white"/>
<path id="eyePupil1" d="M118 71.5147C119.105 71.5147 120 70.6193 120 69.5147C120 68.4101 119.105 67.5147 118 67.5147C116.895 67.5147 116 68.4101 116 69.5147C116 70.6193 116.895 71.5147 118 71.5147Z" fill="white"/>
</g>
</g>
<g id="spaceGuy">
<path id="spaceGuyMain" d="M134.137 28.4611C134.745 28.6394 135.68 28.9679 136.942 29.4465C144.214 32.2483 150.915 36.7986 156.373 43.0541C174.415 63.7305 171.569 93.373 152.991 98.2967C140.776 101.534 134.815 103.56 121.188 107.216C104.033 111.399 89.7966 119.081 81 109C62.958 88.3236 64.7982 56.6315 85.7567 38.4808C93.0032 32.2051 101.524 28.3441 110.317 26.8328C112.106 26.4996 113.122 26.3566 113.367 26.4037C120.357 25.6365 127.445 26.333 134.137 28.4611Z" fill="#68CBDC" fill-opacity="0.3"/>
<path id="spaceGuyShadow" d="M85.7567 38.4808C64.7982 56.6315 62.958 88.3236 81 109C84.2189 112.689 88.8193 114.364 95.5 113.801C81.7843 102.201 77 98.5 73.5 80C70 61.5 79.5 47.5 85.7567 38.4808Z" fill="#B1E4ED"/>
<path id="sparkle" d="M83.6306 49.28C84.2664 49.7445 84.46 50.6343 84.063 51.2676C81.8387 54.8158 80.3557 58.9662 79.616 63.7303C79.4973 64.4943 78.8012 64.9662 78.0611 64.7844C77.321 64.6026 76.8172 63.8359 76.9358 63.072C77.7315 57.9476 79.3391 53.4484 81.7606 49.5857C82.1576 48.9524 82.9948 48.8156 83.6306 49.28ZM89.5356 42.3255C90.2034 42.7849 90.3063 43.7043 89.7654 44.3788C88.8756 45.4883 88.2224 46.2833 87.7981 46.7722C87.2298 47.4269 86.2464 47.5627 85.6018 47.0755C84.9571 46.5882 84.8952 45.6624 85.4635 45.0077C85.8521 44.56 86.4825 43.7928 87.347 42.7148C87.8879 42.0403 88.8678 41.866 89.5356 42.3255Z" fill="#68E0E5"/>
</g>
<g id="leftWhisker">
<path id="leftWhiskerMain" d="M110.317 26.8328L106.43 18.563C104.83 18.984 109.681 16.6969 109.004 17.2512C110.121 19.9043 111.824 22.8171 113.367 26.4037C112.629 26.4037 111.426 26.6565 110.317 26.8328Z" fill="#D1EFF4"/>
<path id="leftWhiskerCircle" d="M109.557 16.765C112.496 14.2101 112.811 9.76063 110.261 6.82683C107.711 3.89303 103.261 3.58587 100.322 6.14077C97.3826 8.69567 97.0674 13.1451 99.6178 16.0789C102.168 19.0127 106.618 19.3199 109.557 16.765Z" fill="#30ADB2"/>
</g>
<g id="rightWhisker">
<path id="rightWhiskerMain" d="M134.137 28.4611L140.584 19.6825C139.388 18.5579 143.876 21.425 143.049 21.151C141.369 23.5221 139.334 26.287 136.942 29.4466C136.444 29.2893 135.443 28.8767 134.137 28.4611Z" fill="#D1EFF4"/>
<path id="rightWhiskerCircle" d="M147.628 21.1834C151.264 19.7877 153.082 15.7145 151.689 12.0855C150.296 8.45657 146.219 6.64613 142.583 8.04179C138.947 9.43745 137.129 13.5107 138.522 17.1397C139.915 20.7686 143.992 22.5791 147.628 21.1834Z" fill="#30ADB2"/>
</g>
<g id="leftFlipper">
<path id="leftFlipperMain" d="M65.5652 178.316C53.57 188.895 45.4228 201.514 41.1868 216.516C40.8993 217.534 41.6663 218.544 42.7234 218.54C56.9568 218.478 68.3909 215.855 76.9631 210.258L77.2565 210.064C85.8036 204.316 89.1374 194.622 87.3197 181.26L87.2625 180.853L87.2665 180.899C86.1863 167.853 78.1543 167.212 65.5652 178.316Z" fill="#199BA0"/>
<path id="flipperShadow" d="M87.5658 183.038C88.8576 195.477 85.4428 204.465 77.3214 210.002C68.3682 216.106 56.9794 218.918 43.155 218.44C56.4962 216.567 66.6345 212.878 73.5698 207.372C80.5052 201.865 85.1705 193.754 87.5658 183.038Z" fill="#118286"/>
</g>
</g>
<g id="checksGroup">
<rect id="check3" x="16" y="75" width="14" height="14" stroke="#199BA0" stroke-width="2" stroke-linejoin="round"/>
<rect id="check2" x="16" y="47" width="14" height="14" stroke="#199BA0" stroke-width="2" stroke-linejoin="round"/>
<rect id="check1" x="16" y="19" width="14" height="14" stroke="#199BA0" stroke-width="2" stroke-linejoin="round"/>
<g id="checkMarks">
<path id="checkMark3" fill-rule="evenodd" clip-rule="evenodd" d="M36.9142 70.0858C37.6953 70.8668 37.6953 72.1331 36.9142 72.9142L22.9142 86.9142C22.1332 87.6952 20.8668 87.6952 20.0858 86.9142L11.5858 78.4142C10.8047 77.6332 10.8047 76.3668 11.5858 75.5858C12.3668 74.8047 13.6332 74.8047 14.4142 75.5858L21.5 82.6716L34.0858 70.0858C34.8668 69.3047 36.1332 69.3047 36.9142 70.0858Z" fill="#68E0E5"/>
<path id="checkMark2" fill-rule="evenodd" clip-rule="evenodd" d="M36.9142 42.0858C37.6953 42.8668 37.6953 44.1331 36.9142 44.9142L22.9142 58.9142C22.1332 59.6952 20.8668 59.6952 20.0858 58.9142L11.5858 50.4142C10.8047 49.6332 10.8047 48.3668 11.5858 47.5858C12.3668 46.8047 13.6332 46.8047 14.4142 47.5858L21.5 54.6716L34.0858 42.0858C34.8668 41.3047 36.1332 41.3047 36.9142 42.0858Z" fill="#68E0E5"/>
<path id="checkMark1" fill-rule="evenodd" clip-rule="evenodd" d="M36.9142 14.0858C37.6953 14.8668 37.6953 16.1331 36.9142 16.9142L22.9142 30.9142C22.1332 31.6952 20.8668 31.6952 20.0858 30.9142L11.5858 22.4142C10.8047 21.6332 10.8047 20.3668 11.5858 19.5858C12.3668 18.8047 13.6332 18.8047 14.4142 19.5858L21.5 26.6716L34.0858 14.0858C34.8668 13.3047 36.1332 13.3047 36.9142 14.0858Z" fill="#68E0E5"/>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="js/quazavr-animation.js"></script>
</body>
</html>