SVG blob maker

index.html

<!--<button onclick="draw()">DRAW</button>-->
<button onclick="addHandle()">Add point</button>

<svg id="blob" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <path d="" stroke="black" fill="black" fill-opacity="0.4"/>
</svg>

script.js

var SVGEl = document.querySelector('#blob');
var preview = SVGEl.querySelector('path');

var points = [	
				{handle: [850,850], startCP:[570,150], endCP: [920,780]},
				{handle: [150,850], startCP:[780,920], endCP: [220,920]},
				{handle: [500,150], startCP:[80,780], endCP: [430,150]}
			]



var center = [500,500];



Array.prototype.MYSTRINGIFY = function(){
	return this.toString().replace(',', ' ');
}

function draw(){
	SVGEl.innerHTML = '<path d="" stroke="black" fill="black" fill-opacity="0.4"/>';
	preview = SVGEl.querySelector('path');
	var start = points[points.length-1];
	var d = "M " + start.handle.toString();
	
	for(i=0;i<points.length; i++){
		let curr = points[i];
		//let previous = points[i-1] || start;
		d += ` C ${curr.startCP.MYSTRINGIFY()}, ${curr.endCP.MYSTRINGIFY()}, ${curr.handle.MYSTRINGIFY()}`;

		
		for(let name in curr){
			let handleUI = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
			let point = curr[name];
			
			handleUI.setAttribute('pointIndex', i);
			handleUI.setAttribute('control', name);
			handleUI.setAttribute('cx',point[0] - 4);
			handleUI.setAttribute('cy',point[1] - 4);
			handleUI.setAttribute('r',8);
			handleUI.setAttribute('fill',"red");
			SVGEl.appendChild(handleUI);

			let func = updateHandle.bind(handleUI);
			handleUI.addEventListener('mousedown', function(){
				SVGEl.addEventListener('mousemove', func);
			});
			handleUI.addEventListener('mouseup', function(){
				SVGEl.removeEventListener('mousemove', func);
			})
		}
	}
  preview.setAttribute('d',d);
}


function addHandle(){
  var first = points[points.length-1]; 
  /*
  
				{handle: [500,150], startCP:[80,780], endCP: [430,150]}
				*/
var final = points[points.length - 2];
	var diffX = first.handle[0] - final.handle[0];
	var diffY = final.handle[1] - first.handle[1];

	var addX = final.handle[0] + diffX / 2;
	var addY = first.handle[1] + diffY / 2;
	
	var smallDiffX = 0.1*diffX;
	var smallDiffY = 0.1*diffY;

	var add = {
		handle: [addX, addY],
		startCP: [addX -smallDiffX , addY + smallDiffY],
		endCP: [addX + smallDiffX, addY - smallDiffY] };

	points.splice(points.length - 1, 0, add);
	draw();
}


function updateHandle(ev){
  console.log(ev);
  var x = ev.offsetX *2;
  var y = ev.offsetY *2;
  this.setAttribute('cx', x);
  this.setAttribute('cy', y);
  points[this.getAttribute('pointIndex')][this.getAttribute('control')] = [x,y]
  window.requestAnimationFrame(redraw);
}

function redraw(){
  var start = points[points.length-1];
	var d = "M " + start.handle.toString();
	
	for(i=0;i<points.length; i++){
		let curr = points[i];
		//let previous = points[i-1] || start;
		d += ` C ${curr.startCP.MYSTRINGIFY()}, ${curr.endCP.MYSTRINGIFY()}, ${curr.handle.MYSTRINGIFY()}`;
	}
  preview.setAttribute('d',d);
  
}








draw();

style.css

#blob {
  width:500px;
  height: 500px;

}

svg-blob-maker.markdown

SVG blob maker

A Pen by Benjamin Moses on CodePen.

License.