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
|
<!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>
<script type="text/javascript" src="src/controller.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 = `rgb(${a}, ${b}, ${c})`
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)
// SVG('rect')
// .clone().show()
// .animate()
// .move(200, 200)
// 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)))
// }
// }
var randPoint = (x = 50, y = 50) => [
Math.random() * 100 - 50 + x,
Math.random() * 100 - 50 + y
]
var poly = SVG('<polygon>').plot([
randPoint(),
randPoint(),
randPoint(),
randPoint(),
randPoint()
]).attr({fill: 'none', stroke: 'black'}).addTo('svg')
var polyAni = poly.animate(new SVG.Spring(300, 50))
SVG.on(document, 'click', function (e) {
polyAni.plot([
randPoint(e.pageX-50, e.pageY-50),
randPoint(e.pageX+50, e.pageY-50),
randPoint(e.pageX+50, e.pageY),
randPoint(e.pageX+50, e.pageY+50),
randPoint(e.pageX-50, e.pageY+50)
])
})
// var mover = SVG('<ellipse>').size(50, 50).center(100, 100).addTo('svg')
// var anim = mover.animate(SVG.PID(null, null, null, false)).move(500, 500)
//
// SVG.on(document, 'mousemove', function (e) {
// //mover.animate(SVG.PID()).move(e.pageX, e.pageY)
// var p = mover.point(e.pageX, e.pageY)
// anim.center(p.x, p.y)
// })
</script>
</body>
</html>
|
