-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
68 lines (66 loc) · 8.08 KB
/
index.html
File metadata and controls
68 lines (66 loc) · 8.08 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spider Move</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="spider">
<svg class="spider-svg" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="full-spider" clip-path="url(#clip0)">
<g id="right-legs">
<path id="Vector" d="M315.251 254.456L296.065 244.712L376.311 164.356L383.827 89.249L360.638 35.136C358.896 31.081 360.779 26.378 364.841 24.635C368.873 22.885 373.607 24.768 375.342 28.838L399.344 84.842C399.875 86.084 400.086 87.444 399.953 88.788L391.952 168.794C391.764 170.63 390.952 172.349 389.647 173.654L340.4 222.9L404.226 208.64L472.747 147.737L488.186 78.255C489.147 73.942 493.429 71.278 497.734 72.176C502.047 73.137 504.766 77.411 503.813 81.724L487.812 153.729C487.445 155.37 486.57 156.854 485.312 157.972L413.307 221.977C412.291 222.883 411.065 223.508 409.736 223.805L342.989 238.712L441.387 256.127C443.161 256.44 444.778 257.338 445.973 258.69L509.978 330.695C511.283 332.156 512.002 334.047 512.002 336.008V408.013C512.002 412.435 508.424 416.014 504.001 416.014C499.579 416.014 496 412.436 496 408.013V339.047L435.863 271.394L343.022 254.968L444.731 329.555C446.786 331.063 447.997 333.462 447.997 336.009V416.015C447.997 417.257 447.708 418.484 447.153 419.593L415.151 483.598C413.745 486.403 410.924 488.02 407.986 488.02C406.783 488.02 405.564 487.747 404.415 487.176C400.462 485.199 398.86 480.394 400.837 476.441L431.996 414.124V340.064L315.251 254.456Z" fill="#5D5360"/>
<path id="Vector_2" d="M378.334 162.34C381.459 159.215 386.522 159.215 389.647 162.34C392.772 165.465 392.772 170.528 389.647 173.653L340.397 222.903L406.25 208.194C410.547 207.249 414.837 209.944 415.798 214.257C416.767 218.57 414.048 222.844 409.735 223.805L342.988 238.712L441.386 256.127C445.738 256.893 448.644 261.049 447.871 265.393C447.183 269.276 443.816 272.003 440.003 272.003C439.542 272.003 439.073 271.964 438.604 271.878L343.02 254.967L444.73 329.554C448.293 332.171 449.058 337.18 446.449 340.742C444.879 342.875 442.449 344.008 439.988 344.008C438.347 344.008 436.691 343.508 435.261 342.461L315.252 254.455L296.023 244.639L378.334 162.34Z" fill="#4B3F4E"/>
</g>
<g id="left-legs">
<path id="Vector_3" d="M196.749 254.456L215.935 244.712L135.689 164.356L128.173 89.249L151.362 35.136C153.104 31.081 151.221 26.378 147.159 24.635C143.127 22.885 138.393 24.768 136.658 28.838L112.656 84.842C112.125 86.084 111.914 87.444 112.047 88.788L120.048 168.794C120.236 170.63 121.048 172.349 122.353 173.654L171.6 222.9L107.774 208.64L39.253 147.737L23.814 78.255C22.853 73.942 18.571 71.278 14.266 72.176C9.953 73.137 7.234 77.411 8.187 81.724L24.188 153.729C24.555 155.37 25.43 156.854 26.688 157.972L98.693 221.977C99.709 222.883 100.935 223.508 102.264 223.805L169.011 238.712L70.613 256.127C68.839 256.44 67.222 257.338 66.027 258.69L2.024 330.696C0.719 332.157 0 334.048 0 336.009V408.014C0 412.436 3.578 416.015 8.001 416.015C12.424 416.015 16.002 412.437 16.002 408.014V339.048L76.139 271.395L168.98 254.969L67.271 329.555C65.216 331.063 64.005 333.462 64.005 336.009V416.015C64.005 417.257 64.294 418.484 64.849 419.593L96.851 483.598C98.257 486.403 101.078 488.02 104.016 488.02C105.219 488.02 106.438 487.747 107.587 487.176C111.54 485.199 113.142 480.394 111.165 476.441L80.006 414.124V340.064L196.749 254.456Z" fill="#5D5360"/>
<path id="Vector_4" d="M134.663 163.348C131.538 160.223 126.475 160.223 123.35 163.348C120.225 166.473 120.225 171.536 123.35 174.661L172.6 223.911L106.747 209.202C102.45 208.257 98.1601 210.952 97.1991 215.265C96.2301 219.578 98.9491 223.852 103.262 224.813L170.009 239.72L71.6111 257.135C67.2591 257.901 64.3531 262.057 65.1261 266.401C65.8141 270.284 69.1811 273.011 72.9941 273.011C73.4551 273.011 73.9241 272.972 74.3931 272.886L169.977 255.975L68.2671 330.562C64.7041 333.179 63.9391 338.188 66.5481 341.75C68.1181 343.883 70.5481 345.016 73.0091 345.016C74.6501 345.016 76.3061 344.516 77.7361 343.469L197.745 255.463L216.974 245.647L134.663 163.348Z" fill="#4B3F4E"/>
</g>
<g id="left-lip">
<path id="Vector_5" d="M237.014 169.004C232.592 169.004 229.013 165.426 229.013 161.003V137.001C229.013 132.579 232.591 129 237.014 129C241.437 129 245.015 132.578 245.015 137.001V161.003C245.015 165.426 241.437 169.004 237.014 169.004Z" fill="#4B3F4E"/>
</g>
<g id="right-lip">
<path id="Vector_6" d="M277.017 169.004C272.595 169.004 269.016 165.426 269.016 161.003V137.001C269.016 132.579 272.594 129 277.017 129C281.439 129 285.018 132.578 285.018 137.001V161.003C285.018 165.426 281.439 169.004 277.017 169.004Z" fill="#4B3F4E"/>
</g>
<g id="spider">
<path id="Vector_7" d="M256.019 216C249.032 216 242.222 216.677 235.596 217.894C227.039 219.466 218.743 214.352 216.666 205.903C215.644 201.745 215.093 197.403 215.093 192.921C215.093 181.31 218.592 170.547 224.643 161.603C209.762 171.67 200.015 188.681 200.015 208C200.015 218.01 202.69 227.373 207.3 235.497C207.345 235.577 207.384 235.658 207.429 235.737C208.705 237.96 210.14 240.073 211.697 242.093C211.927 242.392 212.158 242.686 212.393 242.98C212.769 243.448 213.116 243.941 213.506 244.397C213.517 244.347 213.538 244.299 213.549 244.25C223.805 256.284 238.962 264.004 256.018 264.004C279.858 264.004 300.212 249.118 308.293 228.126C292.486 220.459 274.767 216 256.019 216V216Z" fill="#4B3F4E"/>
<path id="Vector_8" d="M312.023 207.999C312.023 215.093 310.704 221.88 308.297 228.126C308.297 228.126 279.854 264.003 256.018 264.003C225.088 264.003 203.166 238.929 203.166 207.999C203.166 188.695 209.781 171.672 224.642 161.602C233.593 155.537 244.392 151.994 256.018 151.994C286.949 151.995 312.023 177.069 312.023 207.999Z" fill="#5D5360"/>
<path id="Vector_9" d="M360.026 336.009C360.026 357.575 353.462 377.608 342.223 394.219C323.527 421.852 291.894 434.667 256.018 434.667C198.576 434.667 160.999 393.451 160.999 336.009C160.999 300.131 170.176 268.496 197.812 249.801C214.422 238.564 234.453 232.002 256.017 232.002C313.461 232.001 360.026 278.567 360.026 336.009V336.009Z" fill="#6F6571"/>
<path id="Vector_10" d="M284.021 412.014C226.579 412.014 180.013 365.448 180.013 308.006C180.013 286.442 186.576 266.41 197.813 249.8C170.177 268.496 152.011 300.131 152.011 336.008C152.011 393.45 198.577 440.016 256.019 440.016C291.897 440.016 323.528 421.855 342.224 394.219C325.613 405.456 305.585 412.014 284.021 412.014V412.014Z" fill="#5D5360"/>
</g>
</g>
<defs>
<clipPath id="clip0">
<rect width="512" height="512" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<script>
let spider = document.querySelector(".spider");
let leftLeg = document.querySelector("#left-legs");
let rightLeg = document.querySelector("#right-legs");
let leftLip = document.querySelector("#left-lip");
let rightLip = document.querySelector("#right-lip");
window.addEventListener("mousemove", (e)=>{
spider.style.top = e.clientY + "px";
spider.style.left = e.clientX + "px";
spider.style.transform = `translate(-50%,-50%) rotate(${e.clientX / 80}deg)`
})
spider.addEventListener("mouseleave", ()=>{
leftLeg.style.setProperty( "animation-play-state" , "running")
rightLeg.style.setProperty( "animation-play-state" , "running")
leftLip.style.setProperty( "animation-play-state" , "running")
rightLip.style.setProperty( "animation-play-state" , "running")
})
spider.addEventListener("mouseenter", ()=>{
leftLeg.style.setProperty( "animation-play-state" , "paused")
rightLeg.style.setProperty( "animation-play-state" , "paused")
leftLip.style.setProperty( "animation-play-state" , "paused")
rightLip.style.setProperty( "animation-play-state" , "paused")
})
</script>
</body>
</html>