-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathuse3.html
45 lines (41 loc) · 1.32 KB
/
use3.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Vogo Export</title>
<script src='http://d3js.org/d3.v3.min.js'></script>
<script src='http://mgrf.de/vogo/js/vogo.js'></script>
<style>
#mysvg { position: fixed; width: 94%; height: 94%; top: 3%; left: 3%; border: 1px solid rgba(0,0,0,0.1); }
svg line { stroke: #000; stroke-opacity: 1; stroke-width: .3; stroke-linecap: round; }
</style>
</head>
<body>
<svg id="mysvg" viewBox="-50 -30 100 50"></svg>
<script>
var roundabout = new vogo.Func({
name: "roundabout",
args: {"rotate": 16, "step": 4, "stepF": 0.974, "iterations": 200},
viewBox: {x:-14.134, y:-18.269, w:49.428, h:29.831}});
roundabout.setCommands([
new vogo.Loop("iterations", [
new vogo.Move("step*Math.pow(stepF,i+1)"),
new vogo.Rotate("rotate")])]);
var drawing = d3.select("#mysvg").append("g")
.call(vogo.draw(roundabout));
(function repeat() {
drawing.transition()
.duration(200000)
.ease("linear")
.tween("my", function () {
var i = d3.interpolate(0, 360)
return function (t) {
var stepChange = 1+1-(t-0.5)*(t-0.5)*8
vogo.update({rotate: i(t), step: 20*stepChange})(this)
}
})
//.each("end", repeat)
})()
</script>
</body>
</html>