SVG Cubic Bezier Curve Generator in JavaScript

This JavaScript code snippet helps you to create an SVG cubic bezier curve generator tool on a webpage. It lets you visually design curves by dragging points on the SVG canvas. It’s helpful for understanding and experimenting with cubic bezier curves in web design.

You can use this code in web design projects to visualize and experiment with cubic bezier curves. A major benefit is understanding how to control and manipulate curves for smoother, custom animations on websites.

How to Create Svg Cubic Bezier Curve Generator In Javascript

1. First of all, load the Normalize CSS by adding the following CDN links into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. After that, include the necessary HTML structure with a container div, SVG element, and required circles and lines.

<pre id="code">code</pre>

<div id="container" type="image/svg+xml"  class="C"><svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499 499" width="500" height="500" preserveAspectRatio="xMidYMid meet">
	<g id="main">
		<circle id="p1" cx="100" cy="250" r="16" />
		<circle id="p2" cx="400" cy="250" r="16" />
		
		<circle id="c1" cx="100" cy="100" r="8" />
		<circle id="c2" cx="400" cy="100" r="8" />
		
		<line id="l1" x1="100" y1="250" x2="100" y2="100" />
		<line id="l2" x1="400" y1="250" x2="400" y2="100" />
	
		<path id="curve" d="M100,250 C100,100 400,100 400,250" />
	</g>
</svg></div>
<div class="credit">developed by <a href="https://twitter.com/craigbuckler">Craig Buckler</a> of <a href="http://optimalworks.net/">OptimalWorks.net</a> for <a href="http://sitepoint.com/">SitePoint.com</a></div>

3. Include the following CSS code to style the SVG elements and make the visualization more appealing.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  height: 500px;
  background: #fff;
  margin: 0 auto;
  text-align: center;
}

#code {
  display: block;
  width: auto;
  font: bold 3vw monospace;
  padding: 50px 0 4vw 10vw;
  margin: 0;
  color: #1E1935;
  background: rgba(221, 221, 221, 0.35);
}
#code::-moz-selection {
  background: #EF2D56;
  color: #fff;
}
#code::selection {
  background: #EF2D56;
  color: #fff;
}

path {
  stroke-width: 8;
  stroke: #1E1935;
  stroke-linecap: round;
  fill: none;
}

path.fill {
  fill: #1E1935;
}

circle {
  stroke-width: 2;
  stroke: #EF2D56;
  fill: #fff;
}

circle:hover {
  fill: #EF2D56;
  cursor: move;
}

line {
  stroke-width: 1;
  stroke: #999;
  stroke-linecap: round;
  stroke-dasharray: 5, 3;
}

.credit {
  position: absolute;
  top: 5px;
  right: 15px;
  font: 11px Helvetica, Arial, sans-serif;
  color: #999;
}

a {
  color: inherit;
}

4. Finally, insert the JavaScript code that handles the interactive features of the bezier curve. This code enables dragging points to modify the curve dynamically.

Adjust the initial positions of points and control points in the JavaScript code to create different curves.

/* 
 * SVG curve example
 *
 * By Craig Buckler,		https://twitter.com/craigbuckler
 * of OptimalWorks.net		http://optimalworks.net/
 * for SitePoint.com		http://sitepoint.com/
 * 
 * Refer to:
 * http://www.sitepoint.com/html5-svg-quadratic-curves/
 * http://www.sitepoint.com/html5-svg-cubic-curves/
 *
 * This code can be used without restrictions.
 */

(function() {

	var container, svg, cType, code, point = {}, line = {}, fill = false, drag = null, dPoint, maxX, maxY;

	// define initial points
	function Init() {

		var c = svg.getElementsByTagName("circle");
		for (var i = 0; i < c.length; i++) {
			point[c[i].getAttributeNS(null,"id")] = {
				x: parseInt(c[i].getAttributeNS(null,"cx"),10),
				y: parseInt(c[i].getAttributeNS(null,"cy"),10)
			};
		}
		
		// lines
		line.l1 = svg.getElementById("l1");
		line.l2 = svg.getElementById("l2");
		line.curve = svg.getElementById("curve");
		
		// code
		code = document.getElementById("code");
	
		// event handlers
		svg.onmousedown = svg.onmousemove = svg.onmouseup = Drag;
		svg.ontouchstart = svg.ontouchmove = svg.ontouchend = Drag;
		
		DrawSVG();
	}
	
	
	// draw curve
	function DrawSVG() {
	
		// control line 1
		line.l1.setAttributeNS(null, "x1", point.p1.x);
		line.l1.setAttributeNS(null, "y1", point.p1.y);
		line.l1.setAttributeNS(null, "x2", point.c1.x);
		line.l1.setAttributeNS(null, "y2", point.c1.y);
		
		// control line 2
		var c2 = (point.c2 ? "c2" : "c1");
		line.l2.setAttributeNS(null, "x1", point.p2.x);
		line.l2.setAttributeNS(null, "y1", point.p2.y);
		line.l2.setAttributeNS(null, "x2", point[c2].x);
		line.l2.setAttributeNS(null, "y2", point[c2].y);
		
		// curve
		var d = 
			"M"+point.p1.x+","+point.p1.y+" "+cType+
			point.c1.x+","+point.c1.y+" "+
			(point.c2 ? point.c2.x+","+point.c2.y+" " : "")+
			point.p2.x+","+point.p2.y+
			(fill ? " Z" : "");
		line.curve.setAttributeNS(null, "d", d);
		
		// show code
		if (code) {
			code.textContent = '<path d="'+d+'" />';
		}
	}
	
	
	// drag event handler
	function Drag(e) {
		
		e.stopPropagation();
		var t = e.target, id = t.id, et = e.type, m = MousePos(e);
	
		// toggle fill class
		if (!drag && et == "mousedown" && id == "curve") {
			fill = !fill;
			t.setAttributeNS(null, "class", (fill ? "fill" : ""));
			DrawSVG();
		}
	
		// start drag
		if (!drag && typeof(point[id]) != "undefined" && (et == "mousedown" || et == "touchstart")) {
			drag = t;
			dPoint = m;
		}
		
		// drag
		if (drag && (et == "mousemove" || et == "touchmove")) {
			id = drag.id;
			point[id].x += m.x - dPoint.x;
			point[id].y += m.y - dPoint.y;
			dPoint = m;
			drag.setAttributeNS(null, "cx", point[id].x);
			drag.setAttributeNS(null, "cy", point[id].y);
			DrawSVG();
		}
		
		// stop drag
		if (drag && (et == "mouseup" || et == "touchend")) {
			drag = null;
		}
	
	}

	
	// mouse position
	function MousePos(event) {
		return {
			x: Math.max(0, Math.min(maxX, event.pageX)),
			y: Math.max(0, Math.min(maxY, event.pageY))
		}
	}
	
	
	// start
	document.addEventListener('DOMContentLoaded', function() {
		container = document.getElementById("container");
		if (container) {
			cType = container.className;
			maxX = container.offsetWidth-1;
			maxY = container.offsetHeight-1;
			svg = document.getElementById("svg");
			Init();
		}
	});
	
})();

That’s all! hopefully, you have successfully created the SVG Cubic Bezier Curve Generator on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.