-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathex2.html
67 lines (59 loc) · 3.16 KB
/
ex2.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
<!DOCTYPE html>
<html lang="en">
<script>
let index = 0;
let totalScenes = 1
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('scene' + index).style.display = 'block';
document.getElementById('scene' + index).setCurrentTime(0);
});
</script>
<body>
<div id="container">
<div id="slides">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 369.04989928007126 90.28304919004438"
width="738.0997985601425" height="180.56609838008876" id="scene0" style="display: none;">
<g stroke-linecap="round">
<g transform="translate(9.537584900483466 81.44378042854368) rotate(0 174.3849639892578 -35.188873291015625)">
<path d="M0.46 -1.16 C0.46 -1.16, 0.46 -1.16, 0.46 -1.16" stroke="#c92a2a" stroke-width="4.5" fill="none"
stroke-dasharray="8 12" opacity="0">
<animate attributeName="d" from="M0.46 -1.16 C0.46 -1.16, 0.46 -1.16, 0.46 -1.16"
to="M0.46 -1.16 C58.69 -12.93, 291.48 -60.06, 349.51 -71.44" begin="1000ms" dur="2400ms" fill="freeze">
</animate>
<animate attributeName="stroke-dashoffset" values="300;0" dur="5s" repeatCount="indefinite" fill="freeze">
</animate>
<animate attributeName="opacity" from="1" to="1" begin="1000ms" dur="2400ms" fill="freeze"></animate>
</path>
</g>
<g transform="translate(9.537584900483466 81.44378042854368) rotate(0 174.3849639892578 -35.188873291015625)">
<path d="M321.94 -54.62 C321.94 -54.62, 321.94 -54.62, 321.94 -54.62" stroke="#c92a2a" stroke-width="4.5"
fill="none" opacity="0">
<animate attributeName="d" from="M321.94 -54.62 C321.94 -54.62, 321.94 -54.62, 321.94 -54.62"
to="M321.94 -54.62 C330.26 -61.05, 341.58 -66.03, 349.67 -70.72" begin="3400ms" dur="800ms"
fill="freeze"></animate>
<animate attributeName="stroke-dashoffset" values="300;0" dur="5s" repeatCount="indefinite" fill="freeze">
</animate>
<animate attributeName="opacity" from="1" to="1" begin="3400ms" dur="800ms" fill="freeze"></animate>
</path>
</g>
<g transform="translate(9.537584900483466 81.44378042854368) rotate(0 174.3849639892578 -35.188873291015625)">
<path d="M317.92 -74.75 C317.92 -74.75, 317.92 -74.75, 317.92 -74.75" stroke="#c92a2a" stroke-width="4.5"
fill="none" opacity="0">
<animate attributeName="d" from="M317.92 -74.75 C317.92 -74.75, 317.92 -74.75, 317.92 -74.75"
to="M317.92 -74.75 C327.37 -74.87, 339.95 -73.52, 349.67 -70.72" begin="4200ms" dur="800ms"
fill="freeze"></animate>
<animate attributeName="stroke-dashoffset" values="300;0" dur="5s" repeatCount="indefinite" fill="freeze">
</animate>
<animate attributeName="opacity" from="1" to="1" begin="4200ms" dur="800ms" fill="freeze"></animate>
</path>
</g>
</g>
<mask></mask>
</svg>
<script>
beginTimeLists.push([1000]);
</script>
</div>
</div>
</body>
</html>