-
Notifications
You must be signed in to change notification settings - Fork 0
/
no search result.html
144 lines (111 loc) · 5.87 KB
/
no search result.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<!--CSS style-->
<style>
.st0{
fill:none;stroke:#4896EC;
stroke-width:26;stroke-linecap:round;
stroke-miterlimit:10;}
.st1{fill:none;
stroke:#21CE99;
stroke-width:26;
stroke-linecap:round;
stroke-miterlimit:10;}
.st2{fill:#f2f2f2;}
.st3{fill:#21CE99;}
.st4{fill:#4896EC;}
.st5{fill:#5891CC;}
.st6{fill:#4ABB92;}
#NoSearchResults{
width:auto;
height:auto;
width:50%;
height:50%;
background-color:#f2f2f2;
margin: 0;
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<!--SVG Animation-->
<div id="NoSearchResults"><svg viewBox="0 0 581.8 238.4">
<g style="isolation: isolate">
<g class="broken1">
<path d="M390.85,161.6H363.42a13.14,13.14,0,0,0-13.14,13.14h0a13.15,13.15,0,0,0,13.14,13.14h27.43Z" transform="translate(-110.28 -72.27)" style="fill: #4896ec;mix-blend-mode: multiply"/>
<path d="M443.55,166.51l-26.27-14.88L404.34,174.5l26.26,14.87a13.14,13.14,0,1,0,12.95-22.86Z" transform="translate(-110.28 -72.27)" style="fill: #4896ec"/>
</g>
<g class="glass">
<path d="M340.54,234.61A87.71,87.71,0,1,1,465.38,111.36" transform="translate(-110.28 -72.27)" style="fill: none;stroke: #4896ec;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
<g>
<path d="M465,111A87.71,87.71,0,0,1,340.94,235" transform="translate(-110.28 -72.27)" style="fill: none;stroke: #21ce99;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
<line x1="355.02" y1="162.8" x2="400.79" y2="208.57" style="fill: none;stroke: #21ce99;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px"/>
<!-- <path d="M358.76,169" transform="translate(-110.28 -72.27)" style="fill: none;stroke: #21ce99;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/> -->
<path d="M346.14,234.66a5.56,5.56,0,1,0-5.56,5.4A5.48,5.48,0,0,0,346.14,234.66Z" transform="translate(-110.28 -72.27)" style="fill: #f2f2f2"/>
<path d="M471.11,111a5.56,5.56,0,1,0-5.56,5.4A5.48,5.48,0,0,0,471.11,111Z" transform="translate(-110.28 -72.27)" style="fill: #f2f2f2"/>
</g>
<g class="linesleft">
<line x1="83.39" y1="25.99" x2="122.97" y2="25.99" style="fill: none;stroke: #4896ec;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
<line x1="13" y1="100.45" x2="43.3" y2="100.45" style="fill: none;stroke: #21ce99;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
<line x1="36.55" y1="165.76" x2="93.93" y2="165.76" style="fill: none;stroke: #4896ec;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
<line x1="430.93" y1="52.78" x2="461.64" y2="52.78" style="fill: none;stroke: #4896ec;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
<line x1="443.31" y1="126.33" x2="500.9" y2="126.33" style="fill: none;stroke: #21ce99;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
</g>
<g class="linesright">
<line x1="42.67" y1="100.45" x2="73.02" y2="100.45" style="fill: none;stroke: #4896ec;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
<line x1="122.46" y1="25.99" x2="161.69" y2="25.99" style="fill: none;stroke: #21ce99;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
<line x1="93.79" y1="165.76" x2="150.47" y2="165.76" style="fill: none;stroke: #21ce99;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
<line x1="461.28" y1="52.78" x2="490.95" y2="52.78" style="fill: none;stroke: #21ce99;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
<line x1="500.75" y1="126.33" x2="558.52" y2="126.33" style="fill: none;stroke: #4896ec;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 26px;mix-blend-mode: multiply"/>
<g class="dots">
<path d="M209.72,238a5.57,5.57,0,1,0-5.57,5.4A5.49,5.49,0,0,0,209.72,238Z" transform="translate(-110.28 -72.27)" style="fill: #f2f2f2"/>
<path d="M238.48,98.32a5.56,5.56,0,1,0-5.62,5.34A5.49,5.49,0,0,0,238.48,98.32Z" transform="translate(-110.28 -72.27)" style="fill: #f2f2f2"/>
<path d="M158.94,172.78a5.57,5.57,0,1,0-5.62,5.34A5.48,5.48,0,0,0,158.94,172.78Z" transform="translate(-110.28 -72.27)" style="fill: #f2f2f2"/>
<path d="M616.57,198.56A5.56,5.56,0,1,0,611,204,5.48,5.48,0,0,0,616.57,198.56Z" transform="translate(-110.28 -72.27)" style="fill: #f2f2f2"/>
<path d="M577.27,125.11a5.56,5.56,0,1,0-5.62,5.34A5.49,5.49,0,0,0,577.27,125.11Z" transform="translate(-110.28 -72.27)" style="fill: #f2f2f2"/>
<path d="M577.26,125a5.56,5.56,0,1,0-5.62,5.33A5.48,5.48,0,0,0,577.26,125Z" transform="translate(-110.28 -72.27)" style="fill: #f2f2f2"/>
</g>
</g>
</g>
</g>
</svg>
</div>
</body>
<script src="anime.min.js"></script>
<script>
var lineDrawing = anime({
targets: '#NoSearchResults .linesright line',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeOutSine',
duration: 400,
delay: function(el, i) { return i * 200 },
direction: 'alternate',
loop: true
});
var lineDrawing = anime({
targets: '#NoSearchResults .linesleft line',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeOutSine',
duration: 400,
delay: function(el, i) { return i * 200 },
direction: 'alternate',
loop: true
});
var lineDrawing = anime ({
targets: '#NoSearchResults .broken1 path',
easing: 'easeOutElastic',
opacity: .5,
delay: function(el, i) { return i * 400 },
loop: true
})
var lineDrawing = anime ({
targets: '#NoSearchResults .dots path',
easing: 'easeInOutSine',
opacity: .0,
delay: 2000,
duration: 400,
loop: true
})
</script>
</html>