Brady Bezier Curves w.Fill

<!doctype html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style>
body {
  font-family: Franklin Gothic Book;
  font-size: 1.5em;
}
h1 {
  font-family: Franklin Gothic Medium;
  font-size: 42px; 
  margin:10px;
  color:black;
}

h2.subtitle {
  font-family: Franklin Gothic Book;
  font-size: .8em;
  padding: 0px;
  opacity:.7
  color: #666;
  color:black;
}

.domain {
	stroke: rgb(210,210,210); 
	}

.curve, .line {
stroke: black;
  fill: none;
  stroke-width: 1px;
  stroke-opacity: .6;
}
.curve {
  stroke: red;
  stroke-width: 3px;
}
.control {
  fill: #ccc;
  stroke: #000;
  stroke-width: .5px;
  cursor: move;
  z-index:10;
  r:7;)
}
.control.drag, .control:hover {
	fill: rgb(0,50,100);
}
.t, .controltext {
  font-size: .6em;
}
svg {
  display: inline-block;
}
.curve {
stroke-width: 2px;
stroke: red;
stroke-opacity:.8;
}

.t {
	font-size: 64px;
}
	
</style>
<body>
  <div id="container">
	<svg id="vis-canvas" width="800" height="500" xmlns="https://www.w3.org/2000/svg">

</svg>
  <script>
  
		var w = 800,
			h = 500,
			t = 0,
			padding =10,
			n = 4;

var points = [
		  {x: 125, y: 300},
		  {x: 325,y: 50},
		  {x: 525,y: 300}		  
		];

var svgBezier = d3.select("#vis-canvas")

vis.append("text")
		  .attr("class", "t")
		  .attr("x", 700)
		  .attr("y", 50)
		  .attr("text-anchor", "middle");

controlLabels = vis.selectAll("text.controltext")
			.data(points)
			.enter()
			.append("text")
			.attr("class", "controltext")
			.attr("x", x)
			.attr("y", y)
			.attr("dx", "10px")
			.attr("dy", "15px")
			.text(function(d, i) { return "P" + i });
		
		var BezierX=0;
		var BezierY=0;
		var CircleData=[];
		
		getBezier();
		update();	
						
		var last = 0;
		d3.timer(function(elapsed) {
			t = (t + (elapsed - last) / 3000) % 1;
			last = elapsed;
	  		update();
		});

function update() {
		
		  curve.attr("d", lineGenerator(PathData.slice(0,PathData.length*t)));
		  t1 = t;
		  vis.selectAll("text.t").attr("fill","red").text("t=" + t1.toFixed(2));

cp1.attr("x1",points[0].x).attr("x2",points[1].x).attr("y1",points[0].y).attr("y2",points[1].y)
		  cp2.attr("x1",points[1].x).attr("x2",points[2].x).attr("y1",points[1].y).attr("y2",points[2].y)
		
		  d3.selectAll(".controltext")
			.attr("x", x)
			.attr("y", y)
			.attr("dx", "10px")
			.attr("dy", "15px")
			.text(function(d, i) { return "P" + i })
		  
		  d3.selectAll("#bradySVG").attr("transform","translate("+(points[0].x-20)+","+(points[0].y+7)+")")
		  
		  
		}
		
		function getBezier(){
				
			x1 = points[0].x;
			x2 = points[1].x;
			x3 = points[2].x;
			y1 = points[0].y;
			y2 = points[1].y;
			y3 = points[2].y;
			
			PathData = [];	
			CircleData = [];
			NewData = [];
			
			for (z=0; z<=1; z+=.01) {
				BezierX = Math.pow((1-z),2)*x1+2*(1-z)*z*x2+(Math.pow(z,2))*x3;
				BezierY = Math.pow((1-z),2)*y1+2*(1-z)*z*y2+(Math.pow(z,2))*y3;
				
				PathData.push([BezierX,BezierY]);

;}				
			;}

function x(d) {return d.x; }
		function y(d) {return d.y; }
  
  </script>
</body>

https://d3js.org/d3.v4.min.js