/jsbin.OzErEvO.html

## jsbin.OzErEvO.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="myApp" ng-controller="svgCtrl">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  width="{{width}}" height="{{height}}" style="">
    <svg x="-{{points[0].x}}" width="10000">
      <path ng-repeat="path in paths"
            d="{{path.d}}"
      stroke="{{path.color}}"
            stroke-width="1"
            fill="none"/>
    </svg>
  </svg><br/>

  <button ng-click="addPoint()">Add point</button>
</body>
</html>

## jsbin.OzErEvO.js
angular.module("myApp", [])

.controller("svgCtrl", function($scope, $timeout) {
  $scope.points = [{x: 0, y: 0}];

  var colors = ["red", "green", "blue", "grey", "orange", "cyan", "pink"];
  $scope.paths = [];

  for (var i=0; i<colors.length; ++i) {
    $scope.paths.push({
      points: [{x: 0, y:0}],
      d: "M0 0 ",
      color: colors[i]
    });
  }

  $scope.lastPoint = $scope.points[0];
  $scope.width = 800;
  $scope.height = 400;
  var fps = 60;
  var lapTime = 120;
  var maxPoints = fps*lapTime;
  var lastX = 0;

  $scope.addPoint = function(pathIndex) {
    var path = $scope.paths[pathIndex];
    var x = lastX;
    var point = {
      x: x,
      y: (Math.sin(x/10)/(pathIndex+1)+1)/2*$scope.height
    };

    if (path.points.length > maxPoints) {
      path.points.splice(0,1);
      var offset = path.d.indexOf("L", 1);
      path.d = path.d.substr(offset+1);
      path.d = "M" + path.d;
    }

    path.points.push(point);
    path.d += "L" + point.x + " " + point.y + " ";
  };

  var addPointLoop = function() {
    lastX += $scope.width / maxPoints;
    for(var i=0; i<colors.length; ++i) {
      $scope.addPoint(i);
    }
    $timeout(addPointLoop, 1000/fps);
  };

  addPointLoop();
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body ng-app="myApp" ng-controller="svgCtrl">
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
	width="{{width}}" height="{{height}}" style="">
	<svg x="-{{points[0].x}}" width="10000">
	<path ng-repeat="path in paths"
	d="{{path.d}}"
	stroke="{{path.color}}"
	stroke-width="1"
	fill="none"/>
	</svg>
	</svg><br/>

	<button ng-click="addPoint()">Add point</button>
	</body>
	</html>
	angular.module("myApp", [])

	.controller("svgCtrl", function($scope, $timeout) {
	$scope.points = [{x: 0, y: 0}];

	var colors = ["red", "green", "blue", "grey", "orange", "cyan", "pink"];
	$scope.paths = [];

	for (var i=0; i<colors.length; ++i) {
	$scope.paths.push({
	points: [{x: 0, y:0}],
	d: "M0 0 ",
	color: colors[i]
	});
	}

	$scope.lastPoint = $scope.points[0];
	$scope.width = 800;
	$scope.height = 400;
	var fps = 60;
	var lapTime = 120;
	var maxPoints = fps*lapTime;
	var lastX = 0;

	$scope.addPoint = function(pathIndex) {
	var path = $scope.paths[pathIndex];
	var x = lastX;
	var point = {
	x: x,
	y: (Math.sin(x/10)/(pathIndex+1)+1)/2*$scope.height
	};

	if (path.points.length > maxPoints) {
	path.points.splice(0,1);
	var offset = path.d.indexOf("L", 1);
	path.d = path.d.substr(offset+1);
	path.d = "M" + path.d;
	}

	path.points.push(point);
	path.d += "L" + point.x + " " + point.y + " ";
	};

	var addPointLoop = function() {
	lastX += $scope.width / maxPoints;
	for(var i=0; i<colors.length; ++i) {
	$scope.addPoint(i);
	}
	$timeout(addPointLoop, 1000/fps);
	};

	addPointLoop();
	});