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
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="dist/svg.js"></script>
<script type="text/javascript" src="src/morph.js"></script>
<script type="text/javascript" src="src/runner.js"></script>
<script type="text/javascript" src="src/timeline.js"></script>
</head>
<body style="background-color: #c7c7ff">
<!-- Making the svg -->
<svg width=1000px height=1000px >
<rect x=50 y=100 width=200 height=100 stroke=none stroke-width=2 />
</svg>
<!-- Modifying the svg -->
<script>
let rect = SVG('rect').hide()
let {sin, PI: pi, round, sqrt} = Math
function getColor(t) {
let a = round(80 * sin(2 * pi * t / 0.5 + 0.01) + 150)
let b = round(50 * sin(2 * pi * t / 0.5 + 4.6) + 200)
let c = round(100 * sin(2 * pi * t / 0.5 + 2.3) + 150)
let color = new SVG.Color(`rgb(${a}, ${b}, ${c})`).toString()
return color
}
// rect.animate(4000)
// .during(t => rect.transform({scale: sqrt(1 + t), rotate: 720 * t}))
// .after(500, ()=> {rect.attr('stroke', 'white')})
// .queue(() => rect.attr('fill', getColor(0)))
// .animate(1500, 500, true)
// .queue(()=> {}, t => rect.attr('fill', getColor(t)))
// .animate(1000, true)
// .move(200, 200)
// .size(300, 300)
// SVG.Animator.timeout(()=> { rect.animate().pause() }, 1000 - 10)
// SVG.Animator.timeout(()=> { rect.animate().play() }, 2000 - 10)
for (let i = 0 ; i < 15; i++) {
for (let j = 0 ; j < 10; j++) {
// Make the rect
let o = i + j
let rect = SVG('rect').clone().show()
.width(40).height(40)
.x(50 * i).y(50 * j)
.attr('fill', getColor(o * 0.1))
// Move the rect
let {cx, cy} = rect.bbox()
// Animate the rect
rect.animate(3000, Math.random() * 2000)
.during(t => rect.transform({rotate: 720 * t, origin: [cx, cy]}))
.during(t => rect.attr('fill', getColor(o * 0.1 + t)))
}
}
</script>
</body>
</html>
|
