-
Notifications
You must be signed in to change notification settings - Fork 0
/
svg.html
183 lines (181 loc) · 15 KB
/
svg.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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.3.2/svg-morpheus.js"></script>
<style>
svg path{
stroke-miterlimit:10;
stroke-width: 3px;
fill:none;
transition: stroke-dasharray .15s ease-out;
}
svg path:nth-child(1){
stroke:#e93538;
animation:line-1 3s infinite linear;
}
svg path:nth-child(2){
stroke:#7df0ee;
animation:line-2 3s infinite linear;
}
svg path:nth-child(3){
stroke:#00bcd3;
animation:line-3 3s infinite linear;
}
svg path:nth-child(4){
stroke:#3d51b5;
animation:line-4 3s infinite linear;
}
@keyframes line-1 {
0%{
stroke-dasharray: 200 600;
stroke-dashoffset: 0;
}
100%{
stroke-dasharray: 200 600;
stroke-dashoffset: 800;
}
}
@keyframes line-2 {
0%{
stroke-dasharray: 200 600;
stroke-dashoffset: 200;
}
100%{
stroke-dasharray: 200 600;
stroke-dashoffset: 1000;
}
}
@keyframes line-3 {
0%{
stroke-dasharray: 200 600;
stroke-dashoffset: 400;
}
100%{
stroke-dasharray: 200 600;
stroke-dashoffset: 1200;
}
}
@keyframes line-4 {
0%{
stroke-dasharray: 200 600;
stroke-dashoffset: 600;
}
100%{
stroke-dasharray: 200 600;
stroke-dashoffset: 1400;
}
}
#icon{
background-color:#ffffff00;
padding: 20px;
margin: 30px;
border: 1px solid #c4c4c463;
border-radius: 36px;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.295);
}
</style>
</head>
<body>
<svg id="icon" viewBox="-10 -10 230 320" width="400" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
>
<g id="num0" style="display: none;">
<path d="M.5,144.5c0-28.09,0-93.52,45-126,5.57-4,25.52-18,54-18s48.43,14,54,18c45,32.48,45,97.91,45,126s0,93.52-45,126c-5.57,4-25.52,18-54,18s-48.43-14-54-18C.5,238,.5,172.59.5,144.5Z"/>
<path d="M.5,144.5c0-28.09,0-93.52,45-126,5.57-4,25.52-18,54-18s48.43,14,54,18c45,32.48,45,97.91,45,126s0,93.52-45,126c-5.57,4-25.52,18-54,18s-48.43-14-54-18C.5,238,.5,172.59.5,144.5Z"/>
<path d="M.5,144.5c0-28.09,0-93.52,45-126,5.57-4,25.52-18,54-18s48.43,14,54,18c45,32.48,45,97.91,45,126s0,93.52-45,126c-5.57,4-25.52,18-54,18s-48.43-14-54-18C.5,238,.5,172.59.5,144.5Z"/>
<path d="M.5,144.5c0-28.09,0-93.52,45-126,5.57-4,25.52-18,54-18s48.43,14,54,18c45,32.48,45,97.91,45,126s0,93.52-45,126c-5.57,4-25.52,18-54,18s-48.43-14-54-18C.5,238,.5,172.59.5,144.5Z"/>
</g>
<g id="num1" style="display: none;">
<path d="M90.5.5h45v288H65V.5Z"/>
<path d="M90.5.5h45v288H65V.5Z"/>
<path d="M90.5.5h45v288H65V.5Z"/>
<path d="M90.5.5h45v288H65V.5Z"/>
</g>
<g id="num2" style="display: none;">
<path d="M2.19,49.47l45,27c22.82-37.81,64.26-55.35,99-45,29.12,8.67,50.41,36,54,63,5.64,42.41-35.52,78.16-90,126a584.21,584.21,0,0,1-72,54h162l-36-36H2.19a389.43,389.43,0,0,0,72-45c42.8-33.78,96.83-76.43,90-126-3.83-27.78-26.21-53.65-54-63C73.1-8,27.83,9.44,2.19,49.47Z"/>
<path d="M2.19,49.47l45,27c22.82-37.81,64.26-55.35,99-45,29.12,8.67,50.41,36,54,63,5.64,42.41-35.52,78.16-90,126a584.21,584.21,0,0,1-72,54h162l-36-36H2.19a389.43,389.43,0,0,0,72-45c42.8-33.78,96.83-76.43,90-126-3.83-27.78-26.21-53.65-54-63C73.1-8,27.83,9.44,2.19,49.47Z"/>
<path d="M2.19,49.47l45,27c22.82-37.81,64.26-55.35,99-45,29.12,8.67,50.41,36,54,63,5.64,42.41-35.52,78.16-90,126a584.21,584.21,0,0,1-72,54h162l-36-36H2.19a389.43,389.43,0,0,0,72-45c42.8-33.78,96.83-76.43,90-126-3.83-27.78-26.21-53.65-54-63C73.1-8,27.83,9.44,2.19,49.47Z"/>
<path d="M2.19,49.47l45,27c22.82-37.81,64.26-55.35,99-45,29.12,8.67,50.41,36,54,63,5.64,42.41-35.52,78.16-90,126a584.21,584.21,0,0,1-72,54h162l-36-36H2.19a389.43,389.43,0,0,0,72-45c42.8-33.78,96.83-76.43,90-126-3.83-27.78-26.21-53.65-54-63C73.1-8,27.83,9.44,2.19,49.47Z"/>
</g>
<g id="num3" style="display: none;">
<path d="M45.63,67.45c4.29-6.86,18.3-27.27,45-36,2.2-.72,50.88-15.75,81,18,20.11,22.52,23.64,57.47,9,81a58,58,0,0,1-18,18,86.92,86.92,0,0,1,27,27c3.4,5.41,23.19,38.35,9,72-16.72,39.67-65.58,44.47-72,45-27.59,2.27-63.94-7.53-81-36a68,68,0,0,1-9-27l-36-27a68,68,0,0,0,9,27c17.06,28.47,53.41,38.27,81,36,6.42-.53,55.28-5.33,72-45,14.19-33.65-5.6-66.59-9-72a86.92,86.92,0,0,0-27-27,58,58,0,0,0,18-18c14.64-23.53,11.11-58.48-9-81-30.12-33.75-78.8-18.72-81-18-26.7,8.73-40.71,29.14-45,36Z"/>
<path d="M45.63,67.45c4.29-6.86,18.3-27.27,45-36,2.2-.72,50.88-15.75,81,18,20.11,22.52,23.64,57.47,9,81a58,58,0,0,1-18,18,86.92,86.92,0,0,1,27,27c3.4,5.41,23.19,38.35,9,72-16.72,39.67-65.58,44.47-72,45-27.59,2.27-63.94-7.53-81-36a68,68,0,0,1-9-27l-36-27a68,68,0,0,0,9,27c17.06,28.47,53.41,38.27,81,36,6.42-.53,55.28-5.33,72-45,14.19-33.65-5.6-66.59-9-72a86.92,86.92,0,0,0-27-27,58,58,0,0,0,18-18c14.64-23.53,11.11-58.48-9-81-30.12-33.75-78.8-18.72-81-18-26.7,8.73-40.71,29.14-45,36Z"/>
<path d="M45.63,67.45c4.29-6.86,18.3-27.27,45-36,2.2-.72,50.88-15.75,81,18,20.11,22.52,23.64,57.47,9,81a58,58,0,0,1-18,18,86.92,86.92,0,0,1,27,27c3.4,5.41,23.19,38.35,9,72-16.72,39.67-65.58,44.47-72,45-27.59,2.27-63.94-7.53-81-36a68,68,0,0,1-9-27l-36-27a68,68,0,0,0,9,27c17.06,28.47,53.41,38.27,81,36,6.42-.53,55.28-5.33,72-45,14.19-33.65-5.6-66.59-9-72a86.92,86.92,0,0,0-27-27,58,58,0,0,0,18-18c14.64-23.53,11.11-58.48-9-81-30.12-33.75-78.8-18.72-81-18-26.7,8.73-40.71,29.14-45,36Z"/>
<path d="M45.63,67.45c4.29-6.86,18.3-27.27,45-36,2.2-.72,50.88-15.75,81,18,20.11,22.52,23.64,57.47,9,81a58,58,0,0,1-18,18,86.92,86.92,0,0,1,27,27c3.4,5.41,23.19,38.35,9,72-16.72,39.67-65.58,44.47-72,45-27.59,2.27-63.94-7.53-81-36a68,68,0,0,1-9-27l-36-27a68,68,0,0,0,9,27c17.06,28.47,53.41,38.27,81,36,6.42-.53,55.28-5.33,72-45,14.19-33.65-5.6-66.59-9-72a86.92,86.92,0,0,0-27-27,58,58,0,0,0,18-18c14.64-23.53,11.11-58.48-9-81-30.12-33.75-78.8-18.72-81-18-26.7,8.73-40.71,29.14-45,36Z"/>
</g>
<g id="num4" style="display: none;">
<path d="M135.5,261.5V.5h-45l-90,162v36h189l36,27H36.5v-36l90-162h45v261Z"/>
<path d="M135.5,261.5V.5h-45l-90,162v36h189l36,27H36.5v-36l90-162h45v261Z"/>
<path d="M135.5,261.5V.5h-45l-90,162v36h189l36,27H36.5v-36l90-162h45v261Z"/>
<path d="M135.5,261.5V.5h-45l-90,162v36h189l36,27H36.5v-36l90-162h45v261Z"/>
</g>
<g id="num5" style="display: none;">
<path d="M153.76.5l36,27h-135l-9,117c19.89-26.27,50.92-40.27,81-36,42.85,6.08,73.48,47.73,72,90-1.31,37.4-27.76,71.53-63,81-32.44,8.72-59.51-6.91-63-9-25.16-15.05-33.88-38.65-36-45l-36-36c.85,4.89,6.7,35.67,36,54,2.32,1.45,29.79,18,63,9,35.11-9.54,61.68-43.63,63-81,1.46-41.44-28.18-85.41-72-90-31.48-3.3-63.48,14.44-81,45l9-126Z"/>
<path d="M153.76.5l36,27h-135l-9,117c19.89-26.27,50.92-40.27,81-36,42.85,6.08,73.48,47.73,72,90-1.31,37.4-27.76,71.53-63,81-32.44,8.72-59.51-6.91-63-9-25.16-15.05-33.88-38.65-36-45l-36-36c.85,4.89,6.7,35.67,36,54,2.32,1.45,29.79,18,63,9,35.11-9.54,61.68-43.63,63-81,1.46-41.44-28.18-85.41-72-90-31.48-3.3-63.48,14.44-81,45l9-126Z"/>
<path d="M153.76.5l36,27h-135l-9,117c19.89-26.27,50.92-40.27,81-36,42.85,6.08,73.48,47.73,72,90-1.31,37.4-27.76,71.53-63,81-32.44,8.72-59.51-6.91-63-9-25.16-15.05-33.88-38.65-36-45l-36-36c.85,4.89,6.7,35.67,36,54,2.32,1.45,29.79,18,63,9,35.11-9.54,61.68-43.63,63-81,1.46-41.44-28.18-85.41-72-90-31.48-3.3-63.48,14.44-81,45l9-126Z"/>
<path d="M153.76.5l36,27h-135l-9,117c19.89-26.27,50.92-40.27,81-36,42.85,6.08,73.48,47.73,72,90-1.31,37.4-27.76,71.53-63,81-32.44,8.72-59.51-6.91-63-9-25.16-15.05-33.88-38.65-36-45l-36-36c.85,4.89,6.7,35.67,36,54,2.32,1.45,29.79,18,63,9,35.11-9.54,61.68-43.63,63-81,1.46-41.44-28.18-85.41-72-90-31.48-3.3-63.48,14.44-81,45l9-126Z"/>
</g>
<g id="num6" style="display: none;">
<path d="M90.51.73c-9.54,15.16-25.37,40.38-45,72-35.78,57.65-45.44,74.16-45,99,.17,9.38,2,32.44,18,54,3.88,5.21,25.39,33,63,36a84.14,84.14,0,0,0,45-9c28.93-15.36,51.84-51.24,45-90-7.81-44.29-52.15-62.29-54-63-41.54-16.08-77.49,6.69-81,9l36,27c3.51-2.31,39.46-25.08,81-9,3.24,1.25,45.79,18.56,54,63,7.16,38.71-16.07,74.63-45,90a82.49,82.49,0,0,1-45,9c-37.39-3-58.88-30.52-63-36-17.16-22.9-18.34-47.8-18.19-57.83.36-24.66,10.28-39.64,45.19-95.17,8-12.69,23.83-37.95,45-72Z"/>
<path d="M90.51.73c-9.54,15.16-25.37,40.38-45,72-35.78,57.65-45.44,74.16-45,99,.17,9.38,2,32.44,18,54,3.88,5.21,25.39,33,63,36a84.14,84.14,0,0,0,45-9c28.93-15.36,51.84-51.24,45-90-7.81-44.29-52.15-62.29-54-63-41.54-16.08-77.49,6.69-81,9l36,27c3.51-2.31,39.46-25.08,81-9,3.24,1.25,45.79,18.56,54,63,7.16,38.71-16.07,74.63-45,90a82.49,82.49,0,0,1-45,9c-37.39-3-58.88-30.52-63-36-17.16-22.9-18.34-47.8-18.19-57.83.36-24.66,10.28-39.64,45.19-95.17,8-12.69,23.83-37.95,45-72Z"/>
<path d="M90.51.73c-9.54,15.16-25.37,40.38-45,72-35.78,57.65-45.44,74.16-45,99,.17,9.38,2,32.44,18,54,3.88,5.21,25.39,33,63,36a84.14,84.14,0,0,0,45-9c28.93-15.36,51.84-51.24,45-90-7.81-44.29-52.15-62.29-54-63-41.54-16.08-77.49,6.69-81,9l36,27c3.51-2.31,39.46-25.08,81-9,3.24,1.25,45.79,18.56,54,63,7.16,38.71-16.07,74.63-45,90a82.49,82.49,0,0,1-45,9c-37.39-3-58.88-30.52-63-36-17.16-22.9-18.34-47.8-18.19-57.83.36-24.66,10.28-39.64,45.19-95.17,8-12.69,23.83-37.95,45-72Z"/>
<path d="M90.51.73c-9.54,15.16-25.37,40.38-45,72-35.78,57.65-45.44,74.16-45,99,.17,9.38,2,32.44,18,54,3.88,5.21,25.39,33,63,36a84.14,84.14,0,0,0,45-9c28.93-15.36,51.84-51.24,45-90-7.81-44.29-52.15-62.29-54-63-41.54-16.08-77.49,6.69-81,9l36,27c3.51-2.31,39.46-25.08,81-9,3.24,1.25,45.79,18.56,54,63,7.16,38.71-16.07,74.63-45,90a82.49,82.49,0,0,1-45,9c-37.39-3-58.88-30.52-63-36-17.16-22.9-18.34-47.8-18.19-57.83.36-24.66,10.28-39.64,45.19-95.17,8-12.69,23.83-37.95,45-72Z"/>
</g>
<g id="num7" style="display: none;">
<path d="M37.5,27.5h135v27l-108,216-36-27,108-216V.5H1.5Z"/>
<path d="M37.5,27.5h135v27l-108,216-36-27,108-216V.5H1.5Z"/>
<path d="M37.5,27.5h135v27l-108,216-36-27,108-216V.5H1.5Z"/>
<path d="M37.5,27.5h135v27l-108,216-36-27,108-216V.5H1.5Z"/>
</g>
<g id="num8" style="display: none;">
<path d="M54.61,126.61c-23.33-15-37.5-39-36-63,2.39-38.11,43.61-65,81-63,33.23,1.82,68,26.77,72,63,3.93,35.54-24.11,60.51-27,63,31,12.67,52.27,40.79,54,72,2.32,41.75-31.34,70.31-54,81-18.68,8.82-37.31,9-45,9s-26.31-.18-45-9C32,268.92-1.7,240.36.61,198.61,2.34,167.4,23.6,139.28,54.61,126.61Z"/>
<path d="M54.61,126.61c-23.33-15-37.5-39-36-63,2.39-38.11,43.61-65,81-63,33.23,1.82,68,26.77,72,63,3.93,35.54-24.11,60.51-27,63,31,12.67,52.27,40.79,54,72,2.32,41.75-31.34,70.31-54,81-18.68,8.82-37.31,9-45,9s-26.31-.18-45-9C32,268.92-1.7,240.36.61,198.61,2.34,167.4,23.6,139.28,54.61,126.61Z"/>
<path d="M54.61,126.61c-23.33-15-37.5-39-36-63,2.39-38.11,43.61-65,81-63,33.23,1.82,68,26.77,72,63,3.93,35.54-24.11,60.51-27,63,31,12.67,52.27,40.79,54,72,2.32,41.75-31.34,70.31-54,81-18.68,8.82-37.31,9-45,9s-26.31-.18-45-9C32,268.92-1.7,240.36.61,198.61,2.34,167.4,23.6,139.28,54.61,126.61Z"/>
<path d="M54.61,126.61c-23.33-15-37.5-39-36-63,2.39-38.11,43.61-65,81-63,33.23,1.82,68,26.77,72,63,3.93,35.54-24.11,60.51-27,63,31,12.67,52.27,40.79,54,72,2.32,41.75-31.34,70.31-54,81-18.68,8.82-37.31,9-45,9s-26.31-.18-45-9C32,268.92-1.7,240.36.61,198.61,2.34,167.4,23.6,139.28,54.61,126.61Z"/>
</g>
<g id="num9" style="display: none;">
<path d="M204.83,120.83c.06,12.54-2,26.91-9,45-24.26,62.66-87.66,118-108,135l-36-27c20.34-17,83.74-72.34,108-135,7-18.09,9.06-32.46,9-45-.07-13.27-.23-47.58-27-72-22.26-20.3-54-25.65-81-18-6.39,1.82-39.62,12.06-54,45-14.78,33.86-2.81,76,27,99,25.16,19.39,59.92,22.69,90,9l36,27c-30.08,13.69-64.84,10.39-90-9-29.81-23-41.78-65.14-27-99,14.38-32.94,47.61-43.18,54-45,27-7.65,58.74-2.3,81,18C204.6,73.25,204.76,107.56,204.83,120.83Z"/>
<path d="M204.83,120.83c.06,12.54-2,26.91-9,45-24.26,62.66-87.66,118-108,135l-36-27c20.34-17,83.74-72.34,108-135,7-18.09,9.06-32.46,9-45-.07-13.27-.23-47.58-27-72-22.26-20.3-54-25.65-81-18-6.39,1.82-39.62,12.06-54,45-14.78,33.86-2.81,76,27,99,25.16,19.39,59.92,22.69,90,9l36,27c-30.08,13.69-64.84,10.39-90-9-29.81-23-41.78-65.14-27-99,14.38-32.94,47.61-43.18,54-45,27-7.65,58.74-2.3,81,18C204.6,73.25,204.76,107.56,204.83,120.83Z"/>
<path d="M204.83,120.83c.06,12.54-2,26.91-9,45-24.26,62.66-87.66,118-108,135l-36-27c20.34-17,83.74-72.34,108-135,7-18.09,9.06-32.46,9-45-.07-13.27-.23-47.58-27-72-22.26-20.3-54-25.65-81-18-6.39,1.82-39.62,12.06-54,45-14.78,33.86-2.81,76,27,99,25.16,19.39,59.92,22.69,90,9l36,27c-30.08,13.69-64.84,10.39-90-9-29.81-23-41.78-65.14-27-99,14.38-32.94,47.61-43.18,54-45,27-7.65,58.74-2.3,81,18C204.6,73.25,204.76,107.56,204.83,120.83Z"/>
<path d="M204.83,120.83c.06,12.54-2,26.91-9,45-24.26,62.66-87.66,118-108,135l-36-27c20.34-17,83.74-72.34,108-135,7-18.09,9.06-32.46,9-45-.07-13.27-.23-47.58-27-72-22.26-20.3-54-25.65-81-18-6.39,1.82-39.62,12.06-54,45-14.78,33.86-2.81,76,27,99,25.16,19.39,59.92,22.69,90,9l36,27c-30.08,13.69-64.84,10.39-90-9-29.81-23-41.78-65.14-27-99,14.38-32.94,47.61-43.18,54-45,27-7.65,58.74-2.3,81,18C204.6,73.25,204.76,107.56,204.83,120.83Z"/>
</g>
</svg>
</body>
<script>
var myIcons = new SVGMorpheus('#icon');
let i = 0
let timerClear = null
setInterval(() => {
timerClear && timerClear()
myIcons.to('num' + i%10, {rotation:'none',duration:500,easing:'expo-in-out'},()=>{
// timerClear = setStrokeLength()
})
i++
}, 2000);
function setStrokeLength(isInit){
let paths = document.getElementsByTagName('path')
let lineOffset = []
let lineLength = []
let timer = null
for(let i = 0 ; i < paths.length ; i++){
lineLength.push(paths[i].getTotalLength())
paths[i].style.strokeDasharray = lineLength[i]/4 + ' ' + lineLength[i]*3/4
console.log(paths[i].style.strokeDasharray)
lineOffset.push(lineLength[i] / 4 * i)
}
timer = setInterval(()=>{
for(let j = 0 ; j < paths.length ; j++){
lineOffset[j] += (lineLength[j] / 300)
paths[j].style.strokeDashoffset = lineOffset[j]
}
},1000/60)
return function(){
clearInterval(timer)
}
}
</script>
</html>