-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (108 loc) · 9.56 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!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="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<title>Document</title>
</head>
<body>
<svg
width="562"
height="140"
viewBox="0 0 562 140"
fill="none"
xmlns="http://www.w3.org/2000/svg"
id="amazing"
>
<mask
id="path-1-outside-1"
maskUnits="userSpaceOnUse"
x="-0.03125"
y="0.21875"
width="562"
height="140"
fill="black"
>
<rect fill="white" x="-0.03125" y="0.21875" width="562" height="140" />
<path
d="M71.4141 80.2812H28.5234L18.8906 107H4.96875L44.0625 4.625H55.875L95.0391 107H81.1875L71.4141 80.2812ZM32.6016 69.1719H67.4062L49.9688 21.2891L32.6016 69.1719Z"
/>
<path
d="M119.016 30.9219L119.367 39.3594C124.945 32.7969 132.469 29.5156 141.938 29.5156C152.578 29.5156 159.82 33.5938 163.664 41.75C166.195 38.0938 169.477 35.1406 173.508 32.8906C177.586 30.6406 182.391 29.5156 187.922 29.5156C204.609 29.5156 213.094 38.3516 213.375 56.0234V107H200.367V56.7969C200.367 51.3594 199.125 47.3047 196.641 44.6328C194.156 41.9141 189.984 40.5547 184.125 40.5547C179.297 40.5547 175.289 42.0078 172.102 44.9141C168.914 47.7734 167.062 51.6406 166.547 56.5156V107H153.469V57.1484C153.469 46.0859 148.055 40.5547 137.227 40.5547C128.695 40.5547 122.859 44.1875 119.719 51.4531V107H106.711V30.9219H119.016Z"
/>
<path
d="M280.031 107C279.281 105.5 278.672 102.828 278.203 98.9844C272.156 105.266 264.938 108.406 256.547 108.406C249.047 108.406 242.883 106.297 238.055 102.078C233.273 97.8125 230.883 92.4219 230.883 85.9062C230.883 77.9844 233.883 71.8438 239.883 67.4844C245.93 63.0781 254.414 60.875 265.336 60.875H277.992V54.8984C277.992 50.3516 276.633 46.7422 273.914 44.0703C271.195 41.3516 267.188 39.9922 261.891 39.9922C257.25 39.9922 253.359 41.1641 250.219 43.5078C247.078 45.8516 245.508 48.6875 245.508 52.0156H232.43C232.43 48.2188 233.766 44.5625 236.438 41.0469C239.156 37.4844 242.812 34.6719 247.406 32.6094C252.047 30.5469 257.133 29.5156 262.664 29.5156C271.43 29.5156 278.297 31.7188 283.266 36.125C288.234 40.4844 290.812 46.5078 291 54.1953V89.2109C291 96.1953 291.891 101.75 293.672 105.875V107H280.031ZM258.445 97.0859C262.523 97.0859 266.391 96.0312 270.047 93.9219C273.703 91.8125 276.352 89.0703 277.992 85.6953V70.0859H267.797C251.859 70.0859 243.891 74.75 243.891 84.0781C243.891 88.1562 245.25 91.3438 247.969 93.6406C250.688 95.9375 254.18 97.0859 258.445 97.0859Z"
/>
<path
d="M323.625 96.3828H368.133V107H307.734V97.4375L349.711 41.6797H308.367V30.9219H366.023V40.1328L323.625 96.3828Z"
/>
<path
d="M396.961 107H383.953V30.9219H396.961V107ZM382.898 10.7422C382.898 8.63281 383.531 6.85156 384.797 5.39844C386.109 3.94531 388.031 3.21875 390.562 3.21875C393.094 3.21875 395.016 3.94531 396.328 5.39844C397.641 6.85156 398.297 8.63281 398.297 10.7422C398.297 12.8516 397.641 14.6094 396.328 16.0156C395.016 17.4219 393.094 18.125 390.562 18.125C388.031 18.125 386.109 17.4219 384.797 16.0156C383.531 14.6094 382.898 12.8516 382.898 10.7422Z"
/>
<path
d="M430.148 30.9219L430.57 40.4844C436.383 33.1719 443.977 29.5156 453.352 29.5156C469.43 29.5156 477.539 38.5859 477.68 56.7266V107H464.672V56.6562C464.625 51.1719 463.359 47.1172 460.875 44.4922C458.438 41.8672 454.617 40.5547 449.414 40.5547C445.195 40.5547 441.492 41.6797 438.305 43.9297C435.117 46.1797 432.633 49.1328 430.852 52.7891V107H417.844V30.9219H430.148Z"
/>
<path
d="M494.203 68.3281C494.203 56.4688 496.945 47.0469 502.43 40.0625C507.914 33.0312 515.18 29.5156 524.227 29.5156C533.508 29.5156 540.75 32.7969 545.953 39.3594L546.586 30.9219H558.469V105.172C558.469 115.016 555.539 122.773 549.68 128.445C543.867 134.117 536.039 136.953 526.195 136.953C520.711 136.953 515.344 135.781 510.094 133.438C504.844 131.094 500.836 127.883 498.07 123.805L504.82 116C510.398 122.891 517.219 126.336 525.281 126.336C531.609 126.336 536.531 124.555 540.047 120.992C543.609 117.43 545.391 112.414 545.391 105.945V99.4062C540.188 105.406 533.086 108.406 524.086 108.406C515.18 108.406 507.961 104.82 502.43 97.6484C496.945 90.4766 494.203 80.7031 494.203 68.3281ZM507.281 69.8047C507.281 78.3828 509.039 85.1328 512.555 90.0547C516.07 94.9297 520.992 97.3672 527.32 97.3672C535.523 97.3672 541.547 93.6406 545.391 86.1875V51.4531C541.406 44.1875 535.43 40.5547 527.461 40.5547C521.133 40.5547 516.188 43.0156 512.625 47.9375C509.062 52.8594 507.281 60.1484 507.281 69.8047Z"
/>
</mask>
<path
d="M71.4141 80.2812H28.5234L18.8906 107H4.96875L44.0625 4.625H55.875L95.0391 107H81.1875L71.4141 80.2812ZM32.6016 69.1719H67.4062L49.9688 21.2891L32.6016 69.1719Z"
stroke="#F107BA"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M119.016 30.9219L119.367 39.3594C124.945 32.7969 132.469 29.5156 141.938 29.5156C152.578 29.5156 159.82 33.5938 163.664 41.75C166.195 38.0938 169.477 35.1406 173.508 32.8906C177.586 30.6406 182.391 29.5156 187.922 29.5156C204.609 29.5156 213.094 38.3516 213.375 56.0234V107H200.367V56.7969C200.367 51.3594 199.125 47.3047 196.641 44.6328C194.156 41.9141 189.984 40.5547 184.125 40.5547C179.297 40.5547 175.289 42.0078 172.102 44.9141C168.914 47.7734 167.062 51.6406 166.547 56.5156V107H153.469V57.1484C153.469 46.0859 148.055 40.5547 137.227 40.5547C128.695 40.5547 122.859 44.1875 119.719 51.4531V107H106.711V30.9219H119.016Z"
stroke="#F107BA"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M280.031 107C279.281 105.5 278.672 102.828 278.203 98.9844C272.156 105.266 264.938 108.406 256.547 108.406C249.047 108.406 242.883 106.297 238.055 102.078C233.273 97.8125 230.883 92.4219 230.883 85.9062C230.883 77.9844 233.883 71.8438 239.883 67.4844C245.93 63.0781 254.414 60.875 265.336 60.875H277.992V54.8984C277.992 50.3516 276.633 46.7422 273.914 44.0703C271.195 41.3516 267.188 39.9922 261.891 39.9922C257.25 39.9922 253.359 41.1641 250.219 43.5078C247.078 45.8516 245.508 48.6875 245.508 52.0156H232.43C232.43 48.2188 233.766 44.5625 236.438 41.0469C239.156 37.4844 242.812 34.6719 247.406 32.6094C252.047 30.5469 257.133 29.5156 262.664 29.5156C271.43 29.5156 278.297 31.7188 283.266 36.125C288.234 40.4844 290.812 46.5078 291 54.1953V89.2109C291 96.1953 291.891 101.75 293.672 105.875V107H280.031ZM258.445 97.0859C262.523 97.0859 266.391 96.0312 270.047 93.9219C273.703 91.8125 276.352 89.0703 277.992 85.6953V70.0859H267.797C251.859 70.0859 243.891 74.75 243.891 84.0781C243.891 88.1562 245.25 91.3438 247.969 93.6406C250.688 95.9375 254.18 97.0859 258.445 97.0859Z"
stroke="#F107BA"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M323.625 96.3828H368.133V107H307.734V97.4375L349.711 41.6797H308.367V30.9219H366.023V40.1328L323.625 96.3828Z"
stroke="#F107BA"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M396.961 107H383.953V30.9219H396.961V107ZM382.898 10.7422C382.898 8.63281 383.531 6.85156 384.797 5.39844C386.109 3.94531 388.031 3.21875 390.562 3.21875C393.094 3.21875 395.016 3.94531 396.328 5.39844C397.641 6.85156 398.297 8.63281 398.297 10.7422C398.297 12.8516 397.641 14.6094 396.328 16.0156C395.016 17.4219 393.094 18.125 390.562 18.125C388.031 18.125 386.109 17.4219 384.797 16.0156C383.531 14.6094 382.898 12.8516 382.898 10.7422Z"
stroke="#F107BA"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M430.148 30.9219L430.57 40.4844C436.383 33.1719 443.977 29.5156 453.352 29.5156C469.43 29.5156 477.539 38.5859 477.68 56.7266V107H464.672V56.6562C464.625 51.1719 463.359 47.1172 460.875 44.4922C458.438 41.8672 454.617 40.5547 449.414 40.5547C445.195 40.5547 441.492 41.6797 438.305 43.9297C435.117 46.1797 432.633 49.1328 430.852 52.7891V107H417.844V30.9219H430.148Z"
stroke="#F107BA"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M494.203 68.3281C494.203 56.4688 496.945 47.0469 502.43 40.0625C507.914 33.0312 515.18 29.5156 524.227 29.5156C533.508 29.5156 540.75 32.7969 545.953 39.3594L546.586 30.9219H558.469V105.172C558.469 115.016 555.539 122.773 549.68 128.445C543.867 134.117 536.039 136.953 526.195 136.953C520.711 136.953 515.344 135.781 510.094 133.438C504.844 131.094 500.836 127.883 498.07 123.805L504.82 116C510.398 122.891 517.219 126.336 525.281 126.336C531.609 126.336 536.531 124.555 540.047 120.992C543.609 117.43 545.391 112.414 545.391 105.945V99.4062C540.188 105.406 533.086 108.406 524.086 108.406C515.18 108.406 507.961 104.82 502.43 97.6484C496.945 90.4766 494.203 80.7031 494.203 68.3281ZM507.281 69.8047C507.281 78.3828 509.039 85.1328 512.555 90.0547C516.07 94.9297 520.992 97.3672 527.32 97.3672C535.523 97.3672 541.547 93.6406 545.391 86.1875V51.4531C541.406 44.1875 535.43 40.5547 527.461 40.5547C521.133 40.5547 516.188 43.0156 512.625 47.9375C509.062 52.8594 507.281 60.1484 507.281 69.8047Z"
stroke="#F107BA"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
</svg>
<script>
anime({
targets: "#amazing path",
strokeDashoffset: [anime.setDashoffset, 0],
easing: "easeInOutSine",
duration: 2500,
delay: function (el, i) {
return i * 500;
},
direction: "alternate",
loop: false,
});
</script>
</body>
</html>