just another inlet to tributary

inlet.js

var lineWidth = 650

var y1 = 86
var xheight = createLine(1,lineWidth,y1,y1)
    
var y2 = 241    
var baseline = createLine(1,lineWidth,y2,y2)

var y3 = 401    
var descentline = createLine(1,lineWidth,y3,y3)
    

     
    
    
    
var d = []
var hinweg = []    
var rueck = []        
var path = g.append('path')
    		.attr('stroke','blue')
            .attr('stroke-width',5)
            .attr('fill','none')

    
    
var path2 = g.append('path')
    		.attr('stroke','black')
            .attr('stroke-width',2)
            .attr('fill','none')
      
var curve = '';
  
         
d3.select('svg').on('click',function(){
  var point1 = {x:d3.event.pageX ,y:d3.event.pageY-75}
   d.push(point1)   
   //draw(point1)   
   draw2(point1)  
})       
         
  var draw2 = function(point){
	  var n_point1 = {x:point.x-50 ,y:point.y}
      var n_point2 = {x:point.x+50 ,y:point.y}  
      
      hinweg.push(n_point2)  
      rueck.push(n_point1) 
      console.log(hinweg,rueck)
	if(curve == ''){
            
       curve += 'M '+point.x+','+point.y;
      
      }else{
        var q_move = 0
   		var q_point1 = {x:point.x-q_move ,y:point.y-q_move}
        curve += ' Q '+(q_point1.x)+','+(q_point1.y)+', '+point.x+','+point.y;   
         
        //createLine(point.x,q_point1.x,point.y,q_point1.y)
        var previous_element = d[d.length-2]
        //createLine(previous_element.x,q_point1.x,previous_element.y,q_point1.y)  
        createCircle(q_point1,'green',2)
      }      
    createCircle(n_point1) 
    createCircle(n_point2)     
    createCircle(point) 
  	drawArea();
       
    path.attr('d',curve)
    
  } 
      function drawArea(){
        var curve2 = '';
         for(i in hinweg){
           var vorzeichen = (curve2 == '' || i == 0) ? 'M' : 'L';
           curve2 +=  vorzeichen+' '+hinweg[i].x+','+hinweg[i].y;
         
        }        
            
        var reverseArr = rueck.slice().reverse()
        for(i in reverseArr){
		 
         var vorzeichen = (curve2 == '' || i == 0) ? 'M' : 'L';
         curve2 +=  vorzeichen+' '+reverseArr[i].x+','+reverseArr[i].y;
          
        }        
           
     	path2.attr('d',curve2) 
      	
      } 
function createLine(x,x1,y,y1){
	g.append('line')
      .attr("x1",x)
      .attr("y1",y)
      .attr("x2",x1)
      .attr("y2",y1)
      .style("stroke-width", 1)
      .style("stroke", "steelblue")
}	   
        
      function createCircle(pointD,color,r){
        if(!color)
        	color = '#000000'
        if(!r)
        	r = 5
        
        g.append('circle')
         .attr('r',r)
         .attr('stroke',color)
         .attr('stroke-width',2)
         .attr('fill',color)
         .attr('cx',pointD.x)
         .attr('cy',pointD.y) 
      
      }  

function createLine(x1,x2,y1,y2){
	svg.append("svg:line")
    .attr("x1",x1)
    .attr("y1",y1)
    .attr("x2",x2)
    .attr("y2",y2)
    .style("stroke-width", 3)
    .style("stroke", "steelblue")
}

var defs = d3.select('svg').append('defs')
var pattern = defs.append('pattern')
    .attr('id','pattern1')
    .attr('pattermTransform','')
    .attr('height',40)
    .attr('width',40)
    .attr('patternUnits','userSpaceOnUse')
    
var line = pattern.append('line')
      .attr('x1',0)
  	  .attr('x2',40)
      .attr('y1',0)
      .attr('y2',0)
  	  .attr('fill',"#4D8891")
      .style("stroke-width", 2)
      .style("stroke", "steelblue")  
    
var line = pattern.append('line')
      .attr('x1',0)
  	  .attr('x2',0)
      .attr('y1',0)
      .attr('y2',40)
  	  .attr('fill',"#4D8891")
      .style("stroke-width", 2)
      .style("stroke", "steelblue")      
    
d3.select('svg').append('rect')
        .attr('height',500)
      .attr('width',500)
  	  .attr('fill','url(#pattern1)')