-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (92 loc) · 10 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="app.js" defer></script>
<title>SVG Annimation</title>
</head>
<body>
<div class="itworks">
<svg
width="404"
height="83"
viewBox="0 0 404 83"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="itworks">
<path
d="M21.416 9.60796V77H5V9.60796H21.416Z"
stroke="white"
stroke-width="10"
mask="url(#path-1-outside-1)"
/>
<path
d="M63.1685 63.08V77H54.8165C48.8645 77 44.2245 75.56 40.8965 72.68C37.5685 69.736 35.9045 64.968 35.9045 58.376V37.064H29.3765V23.432H35.9045V10.376H52.3205V23.432H63.0725V37.064H52.3205V58.568C52.3205 60.168 52.7045 61.32 53.4725 62.024C54.2405 62.728 55.5205 63.08 57.3125 63.08H63.1685Z"
stroke="white"
stroke-width="10"
mask="url(#path-1-outside-1)"
/>
<path
d="M185.392 9.60796L167.824 77H147.952L137.2 32.648L126.064 77H106.192L89.1042 9.60796H106.672L116.368 58.664L128.368 9.60796H146.416L157.936 58.664L167.728 9.60796H185.392Z"
stroke="white"
stroke-width="10"
mask="url(#path-1-outside-1)"
/>
<path
d="M218.009 77.768C212.761 77.768 208.025 76.648 203.801 74.408C199.641 72.168 196.345 68.968 193.913 64.808C191.545 60.648 190.361 55.784 190.361 50.216C190.361 44.712 191.577 39.88 194.009 35.72C196.441 31.496 199.769 28.264 203.993 26.024C208.217 23.784 212.953 22.664 218.201 22.664C223.449 22.664 228.185 23.784 232.409 26.024C236.633 28.264 239.961 31.496 242.393 35.72C244.825 39.88 246.041 44.712 246.041 50.216C246.041 55.72 244.793 60.584 242.297 64.808C239.865 68.968 236.505 72.168 232.217 74.408C227.993 76.648 223.257 77.768 218.009 77.768ZM218.009 63.56C221.145 63.56 223.801 62.408 225.977 60.104C228.217 57.8 229.337 54.504 229.337 50.216C229.337 45.928 228.249 42.632 226.073 40.328C223.961 38.024 221.337 36.872 218.201 36.872C215.001 36.872 212.345 38.024 210.233 40.328C208.121 42.568 207.065 45.864 207.065 50.216C207.065 54.504 208.089 57.8 210.137 60.104C212.249 62.408 214.873 63.56 218.009 63.56Z"
stroke="white"
stroke-width="10"
mask="url(#path-1-outside-1)"
/>
<path
d="M271.166 32.36C273.086 29.416 275.486 27.112 278.366 25.448C281.246 23.72 284.446 22.856 287.966 22.856V40.232H283.454C279.358 40.232 276.286 41.128 274.238 42.92C272.19 44.648 271.166 47.72 271.166 52.136V77H254.75V23.432H271.166V32.36Z"
stroke="white"
stroke-width="10"
mask="url(#path-1-outside-1)"
/>
<path
d="M328.548 77L312.229 54.536V77H295.812V5.95996H312.229V45.224L328.453 23.432H348.708L326.436 50.312L348.901 77H328.548Z"
stroke="white"
stroke-width="10"
mask="url(#path-1-outside-1)"
/>
<path
d="M376.948 77.768C372.276 77.768 368.116 76.968 364.468 75.368C360.82 73.768 357.94 71.592 355.828 68.84C353.716 66.024 352.532 62.888 352.276 59.432H368.5C368.692 61.288 369.556 62.792 371.092 63.944C372.628 65.096 374.516 65.672 376.756 65.672C378.804 65.672 380.372 65.288 381.46 64.52C382.612 63.688 383.188 62.632 383.188 61.352C383.188 59.816 382.388 58.696 380.788 57.992C379.188 57.224 376.596 56.392 373.012 55.496C369.172 54.6 365.972 53.672 363.412 52.712C360.852 51.688 358.644 50.12 356.788 48.008C354.932 45.832 354.004 42.92 354.004 39.272C354.004 36.2 354.836 33.416 356.5 30.92C358.228 28.36 360.724 26.344 363.988 24.872C367.316 23.4 371.252 22.664 375.796 22.664C382.516 22.664 387.796 24.328 391.636 27.656C395.54 30.984 397.78 35.4 398.356 40.904H383.188C382.932 39.048 382.1 37.576 380.692 36.488C379.348 35.4 377.556 34.856 375.316 34.856C373.396 34.856 371.924 35.24 370.9 36.008C369.876 36.712 369.364 37.704 369.364 38.984C369.364 40.52 370.164 41.672 371.764 42.44C373.428 43.208 375.988 43.976 379.444 44.744C383.412 45.768 386.644 46.792 389.14 47.816C391.636 48.776 393.812 50.376 395.668 52.616C397.588 54.792 398.58 57.736 398.644 61.448C398.644 64.584 397.748 67.4 395.956 69.896C394.228 72.328 391.7 74.248 388.372 75.656C385.108 77.064 381.3 77.768 376.948 77.768Z"
stroke="white"
stroke-width="10"
mask="url(#path-1-outside-1)"
/>
</g>
</svg>
</div>
<div class="gears">
<svg
width="195"
height="194"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="gears">
<path
id="gear-3"
d="M43.5552 146.604C40.933 146.874 38.9143 149.08 38.8934 151.723L38.831 156.989C38.7894 159.632 40.7457 161.879 43.3679 162.213L47.2388 162.712C47.884 165.064 48.7997 167.311 49.9859 169.434L47.4886 172.514C45.8237 174.574 45.9485 177.53 47.8007 179.424L51.4844 183.191C53.3366 185.084 56.2918 185.292 58.3938 183.669L61.4945 181.276C63.6797 182.566 65.99 183.586 68.4039 184.294L68.8201 188.289C69.0907 190.912 71.2967 192.93 73.9397 192.951L79.2052 193.014C81.8481 193.055 84.0959 191.099 84.4289 188.477L84.9076 184.689C87.53 184.044 90.0274 183.066 92.3997 181.775L95.3133 184.127C97.3736 185.792 100.329 185.667 102.223 183.815L105.99 180.131C107.884 178.279 108.092 175.324 106.469 173.222L104.241 170.329C105.615 168.04 106.677 165.605 107.405 163.045L110.86 162.691C113.482 162.42 115.5 160.214 115.521 157.571L115.584 152.306C115.625 149.663 113.669 147.415 111.047 147.082L107.675 146.645C107.03 144.106 106.073 141.65 104.824 139.361L106.926 136.781C108.591 134.72 108.466 131.765 106.614 129.871L102.931 126.104C101.078 124.21 98.1229 124.002 96.0211 125.626L93.5027 127.561C91.1304 126.125 88.5912 125.022 85.9275 124.273L85.5944 121.005C85.3238 118.383 83.118 116.365 80.4747 116.344L75.2094 116.281C72.5664 116.24 70.3187 118.196 69.9855 120.818L69.5693 124.065C66.8224 124.772 64.1794 125.855 61.7236 127.27L59.1222 125.147C57.0618 123.482 54.1064 123.607 52.2126 125.459L48.4249 129.164C46.531 131.016 46.3229 133.971 47.9462 136.073L50.173 138.945C48.8827 141.234 47.863 143.669 47.197 146.229L43.5552 146.604ZM77.5403 140.651C85.0949 140.735 91.1508 146.958 91.0678 154.512C90.9845 162.067 84.7617 168.123 77.2071 168.04C69.6526 167.956 63.5966 161.734 63.6797 154.179C63.7631 146.625 69.9858 140.568 77.5403 140.651Z"
fill="white"
/>
<path
id="gear-2"
d="M181.473 74.1383L174.917 68.6025C172.898 66.8959 169.922 66.9792 168.008 68.7898L164.387 72.182C161.327 70.7044 158.081 69.6638 154.73 69.0603L153.711 64.0656C153.19 61.4849 150.797 59.6952 148.174 59.9033L139.621 60.6317C136.999 60.8606 134.938 63.0042 134.855 65.6472L134.689 70.7252C131.4 71.9115 128.299 73.5348 125.469 75.5743L121.141 72.7023C118.934 71.2455 116 71.6617 114.294 73.6804L108.758 80.2777C107.051 82.2964 107.134 85.2724 108.945 87.1871L112.733 91.2243C111.421 94.1795 110.485 97.2806 109.944 100.465L104.533 101.568C101.952 102.088 100.162 104.481 100.37 107.104L101.099 115.657C101.328 118.279 103.471 120.34 106.114 120.423L111.962 120.61C113.024 123.399 114.418 126.042 116.104 128.518L112.837 133.451C111.38 135.657 111.796 138.591 113.815 140.298L120.37 145.834C122.389 147.54 125.365 147.457 127.28 145.646L131.567 141.63C134.377 142.941 137.332 143.919 140.37 144.502L141.557 150.37C142.077 152.951 144.47 154.741 147.092 154.533L155.646 153.804C158.268 153.575 160.329 151.432 160.412 148.789L160.599 143.045C163.721 141.942 166.676 140.443 169.402 138.591L174.127 141.713C176.333 143.17 179.267 142.753 180.973 140.735L186.509 134.179C188.216 132.16 188.132 129.184 186.322 127.27L182.513 123.233C183.908 120.277 184.928 117.156 185.51 113.95L190.713 112.889C193.294 112.369 195.083 109.975 194.875 107.353L194.147 98.7994C193.918 96.1772 191.774 94.1169 189.131 94.0336L183.908 93.8671C182.825 90.8287 181.368 87.9569 179.558 85.2928L182.409 81.0057C183.908 78.8001 183.491 75.8448 181.473 74.1383ZM149.236 123.586C139.996 124.377 131.837 117.488 131.067 108.248C130.276 99.008 137.165 90.8497 146.405 90.0797C155.646 89.2888 163.804 96.1776 164.574 105.418C165.365 114.658 158.476 122.816 149.236 123.586Z"
fill="white"
/>
<path
id="gear-1"
d="M13.6283 71.079C14.6481 74.5753 16.0633 77.9468 17.8531 81.1101L12.7543 87.5409C11.0893 89.6428 11.2766 92.6397 13.1497 94.5335L21.9321 103.316C23.826 105.21 26.8228 105.376 28.9248 103.711L35.3139 98.654C38.6021 100.548 42.0984 102.025 45.7404 103.066L46.6977 111.287C47.0099 113.95 49.2576 115.948 51.9214 115.948H64.3459C67.0097 115.948 69.2574 113.95 69.5695 111.287L70.4852 103.357C74.3978 102.338 78.1439 100.818 81.661 98.8413L87.842 103.732C89.9439 105.397 92.9408 105.21 94.8346 103.337L103.617 94.5541C105.511 92.6603 105.677 89.6634 104.012 87.5615L99.205 81.4637C101.203 78.0088 102.764 74.3254 103.804 70.4753L111.213 69.622C113.877 69.3098 115.875 67.0622 115.875 64.3983V51.9739C115.875 49.31 113.877 47.0624 111.213 46.7502L103.908 45.897C102.909 42.0885 101.411 38.4465 99.4966 35.0334L103.992 29.3518C105.657 27.2499 105.47 24.253 103.596 22.3592L94.8349 13.5976C92.941 11.7037 89.9442 11.5372 87.8422 13.2022L82.3272 17.5726C78.7476 15.4706 74.9181 13.8681 70.9017 12.7859L70.0692 5.64761C69.757 2.98374 67.5094 0.98584 64.8455 0.98584H52.4211C49.7572 0.98584 47.5096 2.98374 47.1974 5.64761L46.365 12.7859C42.2443 13.8889 38.3109 15.5539 34.6481 17.7391L28.925 13.2022C26.823 11.5372 23.8262 11.7245 21.9323 13.5976L13.1499 22.38C11.256 24.2739 11.0896 27.2707 12.7545 29.3727L17.5411 35.4288C15.6264 38.8835 14.1696 42.5671 13.2123 46.3964L5.5537 47.2705C2.88984 47.5827 0.891937 49.8303 0.891937 52.4942V64.9186C0.891937 67.5825 2.88984 69.8301 5.5537 70.1423L13.6283 71.079ZM58.6435 37.4685C69.965 37.4685 79.1844 46.688 79.1844 58.0094C79.1844 69.3309 69.965 78.5503 58.6435 78.5503C47.3223 78.5503 38.1026 69.3309 38.1026 58.0094C38.1026 46.688 47.3221 37.4685 58.6435 37.4685Z"
fill="white"
/>
</g>
</svg>
</div>
</body>
</html>