forked from TomasHubelbauer/svg-3d
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
89 lines (82 loc) · 2.25 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<style>
svg {
background: silver;
}
</style>
</head>
<body>
<h1>Test</h1>
<h2>Line SMIL animation</h2>
<svg width="800" height="600">
<line stroke="black">
<animate attributeName="x1" values="100;200;100" dur="1s" repeatCount="indefinite" />
<animate attributeName="y1" values="100;200;100" dur="1s" repeatCount="indefinite" />
<animate attributeName="x2" values="400;300;400" dur="1s" repeatCount="indefinite" />
<animate attributeName="y2" values="400;300;400" dur="1s" repeatCount="indefinite" />
</line>
</svg>
<h2>Line CSS animation</h2>
<svg width="800" height="600">
<style>
line {
animation: animate 1s infinite;
}
@keyframes animate {
0% {
x1: 100;
y1: 100;
x2: 400;
y2: 400;
}
33% {
x1: 200;
y1: 200;
x2: 300;
y2: 300;
}
66% {
x1: 100;
y1: 100;
x2: 400;
y2: 400;
}
}
</style>
<line stroke="black" />
</svg>
<h2>Polyline SMIL animation</h2>
<svg width="800" height="600">
<polyline stroke="black" fill="none">
<animate attributeName="points" values="100,200 400,300 200,300;200,100 300,400 300,200;100,200 400,300 200,100;100,200 400,300 200,300" dur="1s" repeatCount="indefinite" />
</polyline>
</svg>
<h2>Polyline CSS animation</h2>
<svg width="800" height="600">
<style>
polyline {
animation: animate 1s infinite;
}
@keyframes animate {
0% {
points: '100, 200 400, 300 200, 300';
}
25% {
points: '200, 100 300, 400 300, 200';
}
50% {
points: '100, 200 400, 300 200, 100';
}
75% {
points: '100, 200 400, 300 200, 300';
}
}
</style>
<polyline stroke="black" fill="none" />
</svg>
</body>
</html>