SVG Cubic Bezier Curve Generator in JavaScript

SVG Cubic Bezier Curve Generator in JavaScript
Code Snippet:
Author: Explosion AI
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 375
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X