felvieira
2/15/2020 - 5:51 AM
Morph Svg Animation
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="600px" height="600px"
viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<defs>
</defs>
<path id="logo"
d="M280.948 9.68561C290.144 4.50441 301.137 2.9672 311.507 4.65538C328.052 7.02295 343.198 16.0334 354.191 28.4752C371.204 47.203 382.396 72.3473 380.859 97.9582C380.441 105.878 378.752 113.831 375.067 120.9C362.626 142.009 345.723 160.318 326.385 175.292C308.851 188.859 289.409 199.887 268.945 208.383C263.366 210.538 257.554 212.109 252.173 214.745C242.387 244.644 230.426 273.92 215.143 301.452C203.072 323.982 187.508 344.371 171.484 364.19C154.87 384.715 137.741 404.891 118.917 423.434C110.332 432.094 101.088 440.206 90.7874 446.773C79.9378 453.684 67.647 458.659 54.7386 459.723C80.5692 411.493 104.444 362.021 122.472 310.284C133.438 280.748 137.061 249.043 137.514 217.702C98.1921 206.619 61.2512 185.929 32.7717 156.454C24.3377 147.828 16.8164 138.344 10.0774 128.345C3.66093 119.568 0.689455 108.698 0.0855535 97.9513C-0.806574 79.1137 5.3491 60.4133 15.2449 44.5403C22.2034 33.7593 30.8708 23.8636 41.4803 16.5619C54.6083 7.72979 71.0165 2.98779 86.7866 5.86319C94.9393 7.47588 103.064 11.161 108.548 17.5775C114.264 23.8636 113.159 33.876 108.884 40.6424C104.965 47.1412 99.9901 54.4292 91.8992 55.6782C82.6622 55.6851 74.2145 49.9137 69.1911 42.4198C68.9235 42.1659 68.3882 41.6649 68.1206 41.411C64.0511 43.7031 60.2492 46.5991 57.1542 50.1127C53.222 54.9919 50.8407 60.9898 49.7359 67.1249C47.9859 76.1628 47.6222 85.7566 42.9008 93.9093C55.068 103.709 70.9205 106.516 85.8807 109.137C96.7373 111.45 107.903 109.22 118.821 110.88C129.581 112.706 139.607 117.297 149.126 122.478C155.35 125.594 161.506 128.908 168.08 131.255C158.98 125.532 151.075 117.599 146.449 107.806C141.625 98.4591 140.575 87.6095 141.728 77.2677C143.608 62.7603 152.125 49.4059 164.031 41.0199C170.859 36.0445 178.957 33.0113 187.261 31.6457C200.492 29.6624 214.32 33.2103 225.313 40.7385C235.12 47.3059 242.497 57.2978 246.107 68.518C250.025 80.5342 249.353 93.9505 244.398 105.576C239.546 117.029 230.515 126.561 219.508 132.312C233.61 127.961 243.986 116.315 257.979 111.711C265.459 108.979 273.55 109.666 281.366 109.487C297.665 108.609 313.915 105.335 328.944 98.8503C332.437 97.4778 335.374 95.0759 338.044 92.4887C331.243 81.7215 333.666 68.1748 328.526 56.8174C325.341 49.6941 319.591 43.6962 312.46 40.464C308.727 46.7295 302.75 51.794 295.654 53.7361C291.64 54.7861 287.083 54.9302 283.418 52.7273C278.663 49.9549 275.396 45.254 272.754 40.5532C270.283 34.6583 267.216 28.0703 269.398 21.6195C271.615 16.404 276.158 12.5198 280.948 9.68561Z"
fill="#FFD200" />
<path id="men1"
d="M322.939 116.061C322.039 111.461 322.739 107.361 322.839 102.761C322.939 97.6613 318.639 91.2613 314.939 87.9613C312.739 86.0613 306.339 85.5613 303.939 86.6613C300.439 88.3613 299.639 91.0613 299.839 94.3613C298.639 94.4613 297.439 94.8613 296.739 95.8613C295.239 97.7613 295.139 99.6613 296.639 101.561C296.939 101.761 297.239 101.961 297.539 102.161C298.839 102.961 299.539 104.061 300.339 105.361C301.439 107.061 301.139 109.361 302.639 110.861C304.739 112.861 307.239 114.861 310.139 115.161C306.639 124.861 300.139 132.661 291.239 138.161C285.839 141.461 280.039 143.061 275.839 147.061C275.239 142.861 274.039 139.061 270.639 135.361C267.439 131.761 262.939 129.861 258.239 129.161C255.239 113.961 242.539 100.161 227.239 103.161C225.839 98.0613 223.439 93.3613 220.239 89.2613C220.639 89.0613 221.039 88.8613 221.539 88.6613C224.339 89.9613 226.039 92.0613 228.039 94.6613C229.039 95.9613 230.639 96.2613 232.139 96.3613C233.939 96.4613 236.039 94.1613 237.039 93.1613C239.739 90.6613 242.239 88.1613 244.639 85.3613C245.539 85.6613 246.339 86.0613 247.239 86.4613C248.239 86.9613 249.139 86.3613 249.239 85.2613C249.639 81.5613 250.639 77.8613 251.239 74.0613C253.539 72.9613 255.939 71.5613 256.139 69.1613C256.639 63.2613 258.339 58.0613 260.539 52.6613V52.5613C261.739 49.6613 261.739 46.4613 259.839 42.7613C257.939 38.9613 255.839 32.4613 252.439 29.6613C248.439 26.3613 243.839 23.9613 238.839 22.4613C219.439 16.2613 209.039 41.5613 204.639 57.5613C202.139 60.0613 199.539 62.4613 196.939 64.8613C192.639 66.0613 188.339 67.1613 183.939 67.9613C180.539 62.8613 176.839 58.1613 171.739 54.5613C167.739 51.6613 162.739 50.5613 157.839 50.2613C156.039 45.6613 153.639 41.3613 149.639 38.4613C145.439 35.4613 140.239 34.5613 135.039 34.3613C137.639 32.8613 140.039 31.1613 142.239 28.9613C148.639 22.7613 152.739 11.1613 162.939 11.6613C163.639 16.4613 164.639 20.8613 169.539 22.9613C172.539 24.2613 173.739 32.1613 177.339 32.1613C177.639 32.6613 177.939 32.7613 179.239 33.5613C179.639 33.7613 180.039 33.7613 180.439 33.5613C185.539 30.5613 192.839 17.7613 186.739 13.0613C181.639 9.16133 175.139 2.56133 169.039 0.561329C163.739 -1.23867 157.639 1.76133 152.439 2.96133C144.639 4.86133 136.639 6.26133 129.039 8.66133C122.339 10.7613 116.839 15.6613 110.239 18.0613C99.0391 22.0613 100.239 31.1613 107.539 38.1613C108.739 43.0613 110.639 47.8613 113.939 51.4613C115.139 56.7613 117.039 61.9613 120.539 65.9613C125.039 71.1613 130.739 74.6613 136.839 77.4613C137.239 80.0613 137.839 82.5613 138.639 85.0613C136.939 97.0613 138.339 109.361 142.639 120.661C143.439 143.161 136.839 165.761 141.539 188.161C138.939 192.961 135.939 197.461 134.039 202.361C131.939 207.661 132.339 213.961 133.139 219.561C134.539 229.161 137.439 244.861 147.639 249.261C147.139 252.961 146.839 256.761 146.939 260.561C144.839 265.561 143.539 270.861 143.039 276.761C141.939 289.161 144.439 301.561 144.839 313.961C131.339 331.061 103.639 338.461 102.439 362.361C93.0391 377.761 83.5391 392.761 67.2391 402.361C63.4391 404.661 56.1391 408.761 58.4391 414.561C59.6391 417.761 61.4391 419.861 63.7391 422.361C66.9391 425.761 69.8391 429.261 72.6391 433.061C74.3391 438.261 76.0391 443.461 78.4391 448.261C81.5391 454.561 87.9391 452.361 93.0391 450.461C97.2391 448.861 105.139 447.661 106.439 442.461C107.439 438.361 99.439 437.661 96.339 437.161C96.839 430.861 95.6391 424.561 94.1391 418.361C97.7391 411.761 101.539 405.361 105.439 398.961C110.739 390.361 119.339 384.361 126.939 377.861C133.839 371.961 141.339 366.361 147.539 359.761C151.339 355.761 154.439 350.761 157.339 345.861C162.739 341.461 167.939 336.861 173.039 332.061C178.139 327.161 180.339 322.061 181.139 315.961C185.139 310.461 188.439 304.561 191.139 298.361C192.639 299.861 194.139 301.361 195.539 302.861C192.139 309.761 189.039 316.961 187.139 324.161C184.239 335.161 188.139 346.361 192.839 356.261C194.039 369.161 194.739 382.461 191.839 394.461C190.139 401.661 184.139 405.661 185.839 413.461C186.339 415.561 188.039 416.761 190.039 417.161C194.739 419.761 202.639 417.661 207.839 417.061C214.339 416.261 221.439 420.061 227.939 420.861C230.739 421.161 233.639 420.461 236.339 419.861C239.939 419.161 243.639 419.461 247.239 418.861C254.339 417.761 252.939 411.561 246.639 410.861C238.139 409.961 232.039 407.461 225.139 402.461C221.839 400.061 218.639 397.761 215.239 395.761C213.139 388.761 214.239 380.761 215.039 373.561C216.039 364.261 218.539 355.261 221.339 346.361C224.939 334.961 224.839 322.461 225.339 310.361C227.839 305.361 229.639 300.161 229.639 294.161C229.639 289.861 227.339 286.061 225.139 282.661C222.939 279.161 220.539 275.761 218.139 272.361C214.039 259.561 207.939 247.461 200.039 236.561C199.739 234.561 199.539 232.461 199.239 230.461C197.539 219.861 195.039 209.561 193.839 199.061C196.039 196.761 197.439 193.761 198.439 190.261C200.439 183.261 201.339 176.261 203.339 169.361C205.439 167.561 207.439 165.661 209.039 163.461C217.039 161.861 224.439 158.761 229.939 152.761C231.739 155.661 233.539 158.561 235.739 161.061C239.639 165.461 245.039 168.061 250.139 170.861C257.039 174.561 263.939 175.761 271.039 175.561C273.139 176.661 275.339 177.761 277.439 178.761C278.639 179.361 279.839 179.861 281.139 180.261C281.239 180.561 281.539 180.861 281.939 181.061C284.939 182.261 289.339 183.661 292.039 180.961C294.239 178.761 294.939 175.561 296.339 172.961C298.439 169.361 302.139 166.761 305.139 163.861C310.139 159.061 311.239 151.561 312.939 145.261C315.239 136.661 320.039 128.861 322.339 120.461C322.939 118.961 323.239 117.861 322.939 116.061Z"
fill="#6155CC" />
<path id="woman1"
d="M248.385 59.7137C251.864 52.8919 252.908 46.8794 244.906 43.1794C240.731 41.3295 235.512 41.0982 231.105 40.1732C226.234 39.1326 221.596 37.5138 216.957 36.0107C217.305 33.3514 216.841 30.5764 216.493 27.6858C222.755 17.0483 211.622 6.98902 201.417 4.67653C189.008 1.78592 176.831 8.49214 169.873 18.4358C167.554 19.9389 165.118 21.2108 162.451 22.1358C161.291 22.4827 158.624 22.4827 157.232 23.0608C156.42 23.4077 155.725 23.9858 155.029 24.4483C142.04 25.3733 129.631 22.4827 116.527 22.2514C107.829 22.1358 99.7111 25.8358 104.35 35.6639C105.394 37.8607 107.597 39.8263 109.221 41.5607C111.656 44.1044 113.628 46.8794 115.367 49.8857C118.382 55.0887 120.702 60.7543 123.717 65.9574C129.863 76.4793 139.489 85.3823 148.071 94.2854C155.261 103.767 155.145 116.485 157.464 127.816C158.74 133.829 160.711 139.726 161.987 145.738C163.843 153.716 163.843 161.694 162.683 169.672C160.827 183.085 155.493 195.804 150.738 208.407C146.911 218.697 142.968 230.028 147.027 240.666C147.491 254.541 148.303 268.416 148.303 282.406C148.303 290.616 147.839 298.825 147.143 307.034C146.447 316.053 145.983 325.997 141.924 334.322C139.141 340.103 136.474 345.19 135.778 351.665C134.85 360.221 135.198 368.662 135.778 377.218C136.937 392.596 139.141 407.627 138.445 423.005C135.778 425.665 133.806 429.134 133.806 432.949C133.69 437.227 134.618 441.158 133.342 445.321C133.111 446.246 133.458 447.518 134.27 448.096C136.01 449.368 138.445 449.252 140.417 449.368C144.823 449.715 147.955 449.021 151.318 452.374C155.609 456.652 165.002 455.958 170.453 455.958C176.251 455.958 182.862 455.149 187.384 451.218C190.632 448.443 189.24 444.28 186.573 441.852C184.369 439.887 181.354 438.499 178.919 436.765C175.324 434.221 172.076 431.33 168.945 428.209C166.046 425.202 163.263 422.196 160.016 419.999C156.42 403.002 158.74 387.74 161.987 370.859C164.422 358.025 166.51 345.075 169.757 332.472C169.989 332.24 170.221 332.009 170.453 331.662C172.076 329.581 173.004 326.922 173.932 324.494C175.672 320.1 176.715 315.359 177.063 310.619C180.194 302.641 182.05 293.969 184.137 285.644C185.297 280.787 186.573 275.931 187.732 271.191C188.08 276.625 188.428 282.175 188.892 287.609C190.052 302.294 193.183 318.25 190.864 332.934C189.936 338.947 188.08 344.728 188.892 350.971C189.82 357.909 191.907 364.731 193.183 371.553C195.85 386.353 195.27 401.268 192.951 416.068C190.98 417.918 190.168 420.809 189.704 423.468C189.24 426.012 187.964 432.255 190.052 434.337C193.183 437.459 200.373 437.458 204.432 437.69C206.52 437.805 208.839 437.921 210.926 437.69C212.086 439.308 212.666 441.39 214.869 441.968C219.624 443.24 224.495 443.355 229.25 443.008C233.541 442.662 245.485 441.39 245.833 435.146C246.181 428.324 234.584 426.359 229.714 424.046C225.539 422.08 222.059 419.537 218.812 416.299C217.653 415.143 216.261 413.524 214.869 412.831C214.869 412.831 213.362 412.137 212.434 411.674C209.767 395.949 214.058 380.224 216.261 364.384C218.117 351.203 218.58 336.634 215.681 323.337C216.725 318.597 217.653 313.74 218.117 308.884C224.727 286.916 229.018 263.328 229.018 240.203C233.888 214.072 219.624 188.057 221.712 161.579C222.291 154.41 224.031 147.357 226.466 140.535C228.206 135.448 232.729 129.435 232.845 123.885C232.961 117.873 229.482 112.785 226.698 107.582C224.611 103.651 222.523 99.8354 220.32 95.9041C232.381 85.9604 241.542 73.2418 248.385 59.7137ZM132.415 39.942C136.937 39.2482 141.112 39.017 145.751 39.017C148.882 39.017 152.014 39.1326 155.261 39.3638C155.029 45.7232 157.696 52.6606 151.666 57.2856C151.434 57.4012 151.666 57.7481 151.898 57.6325C152.13 57.5169 152.362 57.4012 152.593 57.2856C152.477 57.4012 152.477 57.4012 152.361 57.5169C152.13 57.6325 152.362 57.9794 152.593 57.9794C158.624 56.245 165.002 55.2044 169.989 51.1575C170.917 50.3481 171.729 49.4232 172.54 48.4982C175.092 51.3888 176.135 55.2044 176.599 59.2512C175.556 63.7606 173.004 67.9231 169.409 70.9293C162.683 65.2637 154.797 60.6387 147.259 56.0137C142.388 50.4638 137.285 45.1451 131.835 40.1732C131.951 40.0576 132.183 39.942 132.415 39.942ZM232.265 58.2106C232.381 58.2106 232.381 58.3262 232.497 58.3262C230.177 60.87 227.742 63.4137 224.843 65.3793C221.016 68.1543 215.913 69.1949 211.854 71.5074C207.679 73.9355 204.2 77.5199 201.533 81.6824C200.605 81.3355 199.561 81.1042 198.634 80.873C197.822 75.323 197.938 69.773 199.329 64.3387C203.272 65.8418 207.331 66.3043 209.883 62.6043C212.434 58.7887 214.521 53.5856 215.565 48.2669C221.132 51.62 226.814 54.7419 232.265 58.2106Z"
fill="#FFD200" />
<path id="men2"
d="M351.245 67.5559C351.015 67.2115 350.556 67.2115 350.211 67.2115C349.981 66.9818 349.636 66.867 349.291 66.867C342.511 66.4078 335.616 66.7522 328.721 66.7522C324.814 66.7522 320.792 66.7522 316.885 66.867C317.689 58.1409 315.736 47.6925 312.173 40.6886C311.254 38.8515 307.692 37.4737 305.738 38.507C305.163 38.8515 304.704 39.196 304.244 39.6552C304.129 39.4256 303.784 39.3108 303.669 39.6552C299.647 47.8073 297.464 56.5334 296.889 65.604C289.535 65.2595 282.18 65.3744 274.71 65.4892C274.136 64.9151 273.446 64.5707 272.642 64.341C272.642 64.341 272.642 64.341 272.527 64.341C272.182 63.9966 271.838 63.7669 271.493 63.5373C270.344 62.6187 268.62 62.2743 267.356 62.8484C267.126 62.6188 266.896 62.504 266.666 62.2743C265.747 61.7002 264.483 61.7002 263.678 62.3891C263.219 61.9298 262.644 61.5854 262.07 61.4706C259.771 60.7817 258.162 62.8484 257.933 65.0299C256.094 64.1114 253.336 64.4558 251.842 65.8336C251.153 65.8336 250.463 65.8336 249.774 65.8336C240.58 65.8336 231.387 65.8336 222.308 65.8336C214.609 65.8336 205.416 64.4559 197.946 66.2929C197.716 63.8818 197.486 61.5854 197.601 59.1742C197.716 55.1556 199.325 51.3666 199.785 47.4628C203.232 43.7886 205.531 38.0478 203.347 33.5699C204.152 25.9919 204.841 21.2844 201.164 14.5101C198.521 9.45814 195.303 4.86544 190.476 1.88018C185.19 -1.44954 178.41 0.272784 173.009 2.22469C171.285 2.79877 168.757 4.06173 168.987 5.55436C164.505 7.27662 161.862 13.4768 159.564 17.2658C155.657 23.6956 159.449 28.1735 160.253 34.4884C157.955 35.6366 157.61 40.8034 157.84 42.7553C158.185 45.3961 160.253 48.4962 162.896 49.2999C163.241 53.2037 164.735 56.8778 164.046 61.0113C163.816 62.7336 163.356 64.4558 162.896 66.0633C155.887 66.0633 148.992 66.0633 141.982 66.0633C134.052 66.0633 125.319 65.2596 117.274 66.5226C117.274 66.4078 117.16 66.4078 117.16 66.2929C116.93 65.9485 116.93 65.4892 116.585 65.1448C116.24 64.8003 115.781 64.5706 115.321 64.4558C114.861 64.341 114.287 64.4558 113.827 64.4558C113.597 62.8484 112.448 61.3558 111.184 60.7817C109.805 60.0928 108.311 60.2076 107.162 61.0113C105.668 59.8631 103.484 59.978 101.761 61.1261C100.152 60.0928 97.8536 60.4372 96.7044 62.0447C95.6702 61.5854 94.521 61.5854 93.4867 62.2743C92.6823 62.8484 92.2227 63.6521 91.8779 64.5707C86.9365 64.5707 81.9951 64.6855 77.1686 64.6855C71.078 64.6855 64.7575 64.5707 58.552 65.1448C58.2073 60.4372 57.6327 55.7297 56.9432 51.0222C56.3686 46.8888 56.2537 40.5738 53.4957 37.2441C53.3808 37.0144 53.036 37.0144 52.8062 37.0144C52.6913 36.67 52.4614 36.4403 52.1167 36.3255C49.1289 35.4069 46.256 35.2922 43.383 36.2107C43.0383 36.3255 42.9234 36.6699 43.0383 36.8996C37.2924 44.5924 35.9134 55.7297 36.1433 65.8336C30.7422 65.8336 25.3411 65.8336 19.94 65.8336C16.1478 65.8336 12.0108 65.6041 8.10359 65.9485C6.60967 65.7189 5.11575 65.8337 3.62183 66.0633C2.35775 66.1781 1.43841 66.4078 0.748911 67.6708C-0.515173 70.0819 -0.0555041 73.182 1.20858 75.4784C1.55333 76.1673 2.24283 76.1672 2.81742 75.9376C7.98867 77.6599 14.3091 76.6265 19.5953 76.6265C25.456 76.6265 31.3168 76.7414 37.2924 76.6265C37.2924 83.0563 38.7864 89.3713 40.3952 95.6862C41.5444 100.623 43.9576 105.331 49.3587 106.02C54.1852 106.594 56.4835 99.1308 57.6327 95.9159C59.7012 89.9454 60.2758 83.5156 59.7012 77.2006C70.1586 77.8895 80.8459 78.0044 91.4182 78.0044C91.6481 81.1044 92.5674 84.0897 93.7166 86.9601C93.7166 97.5234 95.5552 108.201 97.8536 118.42C99.1177 123.702 100.841 129.098 103.14 134.035C104.864 137.939 106.472 143.91 109.345 147.125C115.551 154.243 123.94 148.388 129.686 143.91C134.627 140.121 138.304 136.102 141.292 131.395C141.522 137.365 142.097 143.221 143.016 149.076C143.705 153.325 145.544 157.343 147.038 161.362C147.613 162.855 147.957 164.462 148.302 166.069C147.613 176.059 145.199 185.703 145.084 195.807C144.625 195.578 144.05 195.463 143.59 195.578C140.832 196.496 141.407 200.4 141.637 202.926C132.558 208.322 132.099 223.478 131.984 234.616C128.996 239.782 125.893 244.49 125.778 250.69C124.514 252.757 123.595 255.168 123.48 257.924C123.25 261.942 124.629 266.191 124.629 270.209C124.629 274.457 123.365 278.82 122.791 283.069C122.101 288.35 123.595 293.976 127.617 297.536C127.502 303.391 128.077 309.362 129.226 315.103C128.421 319.122 128.192 323.255 128.192 327.274C125.319 339.1 121.182 351.041 120.722 363.211C120.492 369.526 122.446 375.727 123.48 381.927C124.744 389.734 124.744 397.542 124.859 405.464C123.365 406.153 122.446 407.416 122.446 409.483C122.216 416.142 120.033 421.769 117.16 427.739C114.517 433.365 110.609 434.398 106.013 437.613C104.174 438.876 103.599 442.551 103.484 444.617C103.14 453.114 110.724 453.688 117.619 453.803C124.399 453.917 134.167 455.295 137.615 448.751C140.028 448.636 142.441 448.177 144.855 447.143C149.681 445.306 148.877 442.665 148.417 437.958C147.842 431.413 147.038 424.983 146.234 418.554C145.889 415.798 144.855 413.042 142.671 411.32C142.901 405.464 143.016 399.494 143.246 393.638C143.705 384.912 146.004 376.99 149.221 368.952C151.635 362.637 153.703 356.437 154.048 349.663C154.508 342.544 153.473 335.426 154.737 328.422C158.759 319.466 161.173 310.166 163.701 300.521C167.608 298.454 171.285 299.143 175.652 297.995C177.606 297.536 177.836 295.01 177.951 293.402C178.065 289.613 177.836 288.58 178.985 285.365C179.904 282.839 180.479 280.083 181.168 277.443C181.858 274.572 182.202 271.817 182.662 269.176C186.799 276.065 190.247 282.954 190.476 291.221C190.591 296.388 195.418 297.191 200.015 296.962C202.773 304.195 205.186 311.544 207.024 319.122C208.518 325.207 210.357 331.063 213.805 336.115C214.264 342.315 213.345 348.4 213.115 354.6C212.885 360.915 214.379 366.541 216.792 372.282C222.538 385.601 222.308 401.905 222.079 416.487C219.665 422.343 220.585 429.232 220.814 435.661C220.929 438.762 219.206 443.354 221.734 445.88C223.458 447.602 226.101 448.062 228.629 448.062C229.088 450.703 230.697 452.08 235.294 452.769C239.776 453.343 244.258 453.573 248.739 453.458C251.382 453.458 256.783 453.917 259.082 452.31C262.185 450.129 260.806 443.125 259.197 440.139C257.243 436.58 254.025 433.48 250.693 430.839C248.509 426.017 247.82 421.08 246.556 415.798C245.866 412.928 243.913 410.631 241.614 409.024C241.959 404.316 242.074 399.609 242.419 394.901C243.108 386.29 244.028 377.793 244.487 369.182C244.832 361.948 244.487 354.83 243.338 347.711C241.959 339.674 237.937 332.211 235.869 324.288C236.098 313.955 236.098 303.736 236.443 293.402C237.822 292.139 239.316 290.991 240.35 289.384C241.844 287.087 240.006 282.38 239.546 280.198C238.282 274.572 237.248 268.946 237.018 263.09C236.788 257.809 236.788 253.101 235.409 247.935C234.26 243.342 232.421 238.864 231.272 234.271C229.893 229.334 230.123 224.052 229.548 218.886C228.744 211.652 225.296 204.533 220.24 199.367C220.47 197.644 220.7 195.922 220.24 194.429C220.125 194.2 220.01 193.97 219.78 193.741C219.665 192.937 219.091 192.363 218.171 192.478C217.712 192.478 217.367 192.592 216.907 192.707C217.137 183.751 217.022 174.566 215.299 165.725C217.137 159.41 219.321 153.21 220.814 146.78C221.734 142.647 222.423 138.398 222.883 134.15C225.066 135.987 227.48 137.71 230.123 138.973C235.869 145.747 243.223 153.44 252.302 152.406C259.427 151.602 261.035 145.288 261.265 138.858C264.483 133.806 266.436 127.95 267.93 121.865C270.573 111.187 274.481 99.5901 274.366 88.338C275.745 86.5009 276.894 84.6637 277.813 82.4822C278.388 81.2192 279.077 79.3821 279.422 77.6599C284.938 77.6599 290.454 77.6599 295.855 77.6599C294.821 83.86 295.281 90.175 296.2 96.3752C296.66 99.2456 297.004 103.609 299.073 105.905C301.486 108.546 304.129 107.053 307.692 107.857C308.496 108.087 309.071 107.627 309.3 106.938C313.093 97.5233 317.804 87.649 317.459 77.3154C328.721 77.7747 339.983 77.6599 351.13 77.6599C352.049 77.6599 352.509 76.971 352.509 76.1672C353.428 73.9857 353.084 69.8523 351.245 67.5559ZM255.979 88.338C256.554 92.0121 257.128 95.1122 256.094 99.2456C254.945 103.838 252.187 108.087 249.888 112.22C248.624 114.516 247.245 117.157 246.326 119.913C244.028 114.172 240.465 108.89 236.328 104.183C235.754 98.3271 233.685 92.701 230.582 87.5342C226.905 81.4489 220.929 79.4969 214.494 78.2339C225.756 78.808 237.248 78.2339 248.395 78.2339C248.624 79.2673 248.969 80.1859 249.544 81.2192C251.153 83.7452 253.566 86.2712 255.979 88.338ZM124.284 107.283C121.871 109.35 119.688 111.876 117.849 114.516C117.16 112.105 116.355 109.694 114.631 106.938C111.069 100.853 110.954 93.7343 110.494 86.8453C112.218 84.7786 114.516 82.9415 116.47 80.9896C117.504 79.9562 118.424 78.5784 118.998 77.0858C125.778 78.4636 133.018 78.8081 140.258 78.6932C137.96 80.0711 135.891 81.6785 133.937 83.6304C127.617 89.6009 125.549 98.7864 124.284 107.283Z"
fill="#6155CC" />
<path id="woman2"
d="M343.825 68.1169C332.602 65.7034 320.535 67.9963 309.071 67.6342C306.778 67.5135 304.606 67.3929 302.313 67.3929C302.676 67.2722 302.917 67.2722 303.279 67.1515C308.226 65.9447 313.415 65.462 317.156 61.6003C317.88 60.8762 317.76 59.6694 316.794 59.0661C312.45 56.6525 307.744 57.6179 302.917 57.6179C295.918 57.6179 288.919 56.6525 281.92 56.5318C270.335 56.4111 258.871 58.342 247.287 58.5833C245.839 58.4627 244.391 58.342 242.943 58.2213C236.064 57.4972 228.341 55.6871 221.583 57.1352C213.74 58.8247 206.62 62.8071 198.897 64.8586C190.933 66.9102 182.848 67.0308 174.763 67.2722C174.883 65.5827 175.004 63.8932 175.125 62.2037C177.9 62.2037 180.675 62.4451 183.451 62.9278C185.623 63.2898 187.433 62.8071 188.761 61.1176C190.209 59.4281 190.45 56.5318 190.812 54.4803C191.295 51.584 191.898 48.567 192.26 45.6708C193.587 45.0674 194.674 44.2226 194.674 43.1365C194.553 40.2402 194.311 37.2233 193.949 34.2063C195.277 32.8788 196.363 31.31 196.363 29.6205C196.484 25.3968 195.76 20.3283 194.553 16.1045C195.277 9.94994 188.761 3.91602 182.848 1.74381C171.384 -2.35925 159.92 1.01974 151.352 9.34655C148.094 12.4842 145.922 16.3459 144.474 20.5696C138.078 21.173 132.044 23.9486 128.183 29.4998C125.649 33.2409 124.201 37.1026 123.718 41.5677C122.994 49.8945 131.32 60.9969 121.546 67.0308C121.425 67.1515 121.546 67.2722 121.667 67.2722C121.667 67.3929 121.787 67.3929 121.908 67.3929C132.527 66.4274 139.526 57.8593 143.629 48.205C144.474 50.1359 145.801 51.8254 148.094 53.1528C149.542 53.9976 151.231 53.9976 152.679 53.3942C151.955 57.6179 151.111 61.8417 150.266 65.9447C140.491 67.0308 133.734 78.616 132.044 87.3048C128.666 104.562 138.319 123.508 144.112 139.197C147.973 149.575 151.835 158.626 149.18 169.97C147.008 179.624 141.216 188.313 136.871 197.122C133.251 204.604 130.596 212.328 130.596 220.654C130.596 227.171 133.372 233.084 136.63 238.636C137.716 263.375 137.837 287.51 133.975 312.008C131.32 317.921 128.907 323.955 126.614 329.989C122.873 339.764 122.753 349.78 123.356 360.038C124.683 382.605 130.596 404.568 124.08 426.652C121.546 427.135 120.581 429.79 120.098 432.566C119.615 435.703 119.374 438.841 119.012 441.979C118.77 444.392 117.564 447.892 118.167 450.305C119.012 453.564 124.683 453.081 127.338 453.322C128.183 453.443 128.907 453.443 129.752 453.564C137.957 457.305 146.525 459.115 155.576 458.994C163.299 458.994 172.711 457.425 177.779 451.15C183.33 444.151 173.194 441.496 168.488 438.962C163.178 436.065 158.592 432.204 153.886 428.342C152.438 427.135 151.111 426.29 149.542 425.808C143.629 407.103 143.991 388.156 147.611 368.848C150.266 354.366 154.852 340.367 158.351 326.007C161.609 319.49 164.143 312.611 166.436 305.974C167.16 303.802 167.884 301.63 168.488 299.457C168.246 306.215 168.126 313.094 168.608 319.731C164.747 332.282 163.057 345.436 166.436 358.228C168.85 367.641 170.66 376.571 170.66 386.467C170.66 396.362 169.332 406.137 168.005 415.912C168.005 416.033 168.005 416.033 168.005 416.153C167.522 416.998 167.16 417.964 166.798 418.929C166.074 420.86 165.953 423.032 165.591 425.084C165.35 427.497 164.023 431.48 164.867 433.893C166.195 437.876 172.228 438.6 175.728 439.203C177.417 439.444 179.227 439.565 181.038 439.565C181.279 439.806 181.52 439.927 181.882 440.048C191.898 442.703 202.155 445.72 212.533 444.996C216.877 444.754 229.307 442.341 228.945 435.824C228.824 432.928 227.738 431.48 224.962 430.394C219.773 428.342 214.584 426.411 209.516 423.756C204.569 421.222 200.948 417.481 196.846 413.981C194.553 412.05 192.139 411.085 189.485 411.206C191.777 382.484 193.949 353.521 194.674 324.679C195.156 322.266 195.398 319.852 195.76 317.439C196.122 316.111 196.363 314.784 196.725 313.456C199.018 303.681 200.948 293.906 202.879 284.131C205.413 270.977 208.068 256.979 208.068 243.221C208.792 239.36 209.034 235.377 208.672 231.274C207.827 220.534 204.569 209.914 202.879 199.294C200.828 186.744 200.224 174.073 202.517 161.522C204.086 152.471 205.775 143.903 206.258 134.973C208.672 131.714 210.361 128.215 210.482 124.715C210.602 114.337 202.035 107.579 198.897 98.5279C205.655 99.976 212.412 99.9761 219.17 97.5625C227.014 94.7869 234.737 90.4424 242.339 86.2187C251.39 85.374 260.681 85.9773 269.491 83.8051C274.076 82.719 278.541 80.4261 283.006 78.978C289.039 77.0471 295.556 77.1678 301.831 77.0471C302.072 77.0471 302.313 76.9265 302.555 76.9265C307.623 79.4607 313.174 79.0987 319.328 78.0126C325.121 77.0471 330.792 75.7197 336.585 74.5129C339.722 73.9095 343.101 73.9095 344.79 70.8925C345.273 69.6858 344.911 68.3583 343.825 68.1169Z"
fill="#6155CC" />
</svg>
<div id="slider"></div>
</div>body {
background-color: #000;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
max-width: 100%;
/* height:456px; */
}
svg {
max-width: 100%;
width: 190px;
/* height: 456px; */
}
#men1,
#woman1,
#men2,
#woman2 {
visibility: hidden;
}
const select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
id = function(s) {
return document.getElementById(s);
},
container = select(".container"),
logo = id("logo"),
timerOfMorphAnimation = 2,
timerOfShowingItem = "+=1",
tl = new TimelineMax({
paused: false,
repeat: -1,
yoyo: true,
repeatDelay: 1.5,
delay: 1
}),
animateFigures = [
{
logo: logo,
sel: "#men1",
color: "#6155CC"
},
{
logo: logo,
sel: "#woman1",
color: "#6155CC"
},
{
logo: logo,
sel: "#men2",
color: "#6155CC"
},
{
logo: logo,
sel: "#woman2",
color: "#6155CC"
},
{
logo: logo,
sel: logo,
color: "#6155CC"
}
];
const constructAnimate = (target, tlObject) => {
const tlConfiguration = (
from,
sel,
color,
morphAnimation = timerOfMorphAnimation,
showingItem = timerOfShowingItem
) => {
const tlAnimateOptions = (
scale,
type,
animationType = "Power4.easeInOut"
) => {
return {
morphSVG: sel,
ease: animationType,
...(type && { type: type }),
...(color && { fill: color }),
...(scale && { scale: scale })
};
};
return [from, morphAnimation, tlAnimateOptions(), showingItem];
};
target.forEach(item => {
tlObject.to(...tlConfiguration(item.logo, item.sel, item.color));
});
};
TweenMax.set(container, {
position: "absolute",
top: "50%",
left: "50%",
xPercent: -50,
yPercent: -50
});
constructAnimate(animateFigures,tl);
// tl.to(...tlConfiguration(logo,"#men1","#6155CC"));
// tl.to(...tlConfiguration(logo,"#woman1", "#6155CC"));
// tl
// .to(...tlConfiguration(logo,"#men2", "#6155CC"));
// tl
// .to(...tlConfiguration(logo,"#woman2", "#6155CC"));
// tl
// .to(...tlConfiguration(logo,logo, "#6155CC"));
// controles
// GSDevTools.create();
// versao com logo intercalando
// tl.to(circle, 1, {
// morphSVG:{shape:"#men1",map:"position"},
// ease:Power4.easeInOut,
// fill:'#6155CC',
// }, "+=1")
// .to(circle, 1, {morphSVG:"#logo",
// ease:Power4.easeInOut,
// fill:'#FFD200',
// }, "+=1")
// .to(circle, 1, {morphSVG:"#woman1",
// ease:Power4.easeInOut,
// type:"rotational",
// fill:'#6155CC',
// }, "+=1")
// .to(circle, 1, {morphSVG:"#logo",
// ease:Power4.easeInOut,
// fill:'#FFD200',
// }, "+=1")
// .to(circle, 1, {morphSVG:"#men2",
// ease:Power4.easeInOut,
// fill:'#6155CC',
// }, "+=1")
// .to(circle, 1, {morphSVG:"#logo",
// ease:Power4.easeInOut,
// fill:'#FFD200',
// }, "+=1")
// .to(circle, 1, {morphSVG:"#woman2",
// ease:Power4.easeInOut,
// fill:'#6155CC',
// }, "+=1")
// .to(circle, 1, {morphSVG:circle,
// ease:Power4.easeInOut,
// }, "+=1");