-
Notifications
You must be signed in to change notification settings - Fork 325
/
Copy pathbasic-uncomposed.html
95 lines (81 loc) · 3.96 KB
/
basic-uncomposed.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
<html class="no-js">
<head>
<meta charset="utf-8" />
<title>Lazy Line Painter</title>
<meta name="description" content="A JS library for SVG path animation" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/common.css" media="all" />
<!-- Include lazylinepainter -->
<script src="../lib/lazy-line-painter-2.0.3.js"></script>
<style>
svg {
opacity: 0;
stroke: #b5287b;
stroke-width: 7;
}
</style>
<script type="text/javascript">
(function () {
document.onreadystatechange = () => {
if (document.readyState === "complete") {
const el = document.querySelector("#logo");
const myAnimation = new LazyLinePainter(el, {
delay: 1000,
});
el.style.opacity = "1";
myAnimation.paint();
}
};
})();
</script>
</head>
<body>
<div class="content">
<div class="logo-wrap">
<svg viewBox="0 0 350 225" xmlns="http://www.w3.org/2000/svg" id="logo">
<path
d="M64,35.333c0,0,18-21.333,4-28.667S41.772,14.978,38.667,48c-3.667,39-27,56.584-33,43.667C4.75,83.834,14,80.333,28.333,93.333 c19,16,37.329-13.333,41.998-19S93.667,57.667,89,54S60.667,79.167,75.333,87.667c6.079,2.854,22-10.667,27-32 c0,0-14.667,29.667-7,29.667C107,85.333,122.646,47.664,133,49c10.333,1.333,15.333,22-10,26.667C132,92.333,116,113,108.333,106 c-7.487-6.836,40-17,57.667-61.667c0,0-15,28.667-4.667,31.667s29.667-30.333,27-34s-6.268,1.918-9,16c-2.935,15.127-5,43-23.667,43 c-5.334,0,1.02-7.5,7.171-11.578c7.451-4.94,16.476-8.664,28.162-23.089"
fill="none"
/>
<path
d="M241.998,64.333c0,0,14.667-15.666,6.667-25.333s-27.333-7.711-29.333,17.145s-7.657,67.582-32.333,66.855 c-11.333-0.333-4.559-16.073,16.667-1c23,16.333,46.333-18,51.333-36.333c0,0-10.333,33,0,32.667s26-38.867,26-38.867 s-2.333,27.2-7.333,35.867c8-17,19.333-39.068,27-35.867s-17.667,28.201-5.667,32.201c0,0,11.667,0.667,21.667-18.333"
fill="none"
/>
<path
d="M319.665,93.667c0,0,21.29-5.219,19-17c-2.332-11.999-34.296,17.941-17,30.733c7,5.177,21.667-3.377,23-10.399"
fill="none"
/>
<path
d="M260.168,72.332c-1.013,0-1.833-0.821-1.833-1.833s0.821-2.833,1.833-2.833s1.833,0.821,1.833,1.833s-0.821,1.833-1.833,1.833"
fill="none"
/>
<path
d="M77.667,131.667c0,0,5,19.667,1.55,48.395C76.928,200.65,68.283,220.001,62.667,220c-12,0,26.333-101,64.667-91 c13.333,3.667,13.96,49.667-29.687,56.667c-8.313,1.333-7.354-6,0-5.667c0,0,13.687-1.333,28.687,7"
fill="none"
/>
<path
d="M126.667,201.334c0,0,16.333-18.667,27.667-24.667s0.333-6.03-3.667-2.515S128.314,198,142.99,206.334s24.343-27.363,25.01-32.182 c-7.333,21.182-9,38.849,7.667,18.515L191,165.334c0,0-11.713,34-1,34c8.667,0,22.666-24,26.333-36"
fill="none"
/>
<path
d="M215.909,164.635c0,0-2.909,21.032-5.909,31.032c7-15.667,22.333-37,25-32.333s-15.667,27.667-2.333,30.333s32.667-49,34-59.333 C261.333,158,249.231,188.447,262.168,190c6.856,0.823,18.498-13.364,20.832-19.848"
fill="none"
/>
<path
d="M191,151.335c0,0,4,2,6-2.333s-3.001-6.667-6-4.667S191,151.335,191,151.335z"
fill="none"
/>
<path
d="M249.113,159.002c0,0,13.22-0.667,18.22-2s6.667-1,6.667-1"
fill="none"
/>
<path
d="M283.666,172.668c0,0,16.334-3.999,20.667-13.666s-7.999-7.073-13.333-1.037s-16,24.036-2,27.497c15.666,5.54,33-23.128,33-36.903 c0-5.558-6.445-4.948-6.445,0.776c0,5.46,3.111,4.333,9.778,4.333s11.333,5.331,6.333,10.666s-10.772,12.52-3.333,16.667 c8,4.46,12-9,12-9"
fill="none"
/>
</svg>
</div>
</div>
</body>
</html>