This tutorial will guide you through the process of creating an Svg Cubic Bezier Curve Generator In Javascript. This generator is a useful tool for web developers and designers who need to create custom curves for their websites or applications. By following this tutorial, you’ll learn how to define the points and control handles necessary to generate a cubic Bezier curve, and how to manipulate them using JavaScript.
Adding Header Assets
Add the following assets to the head section of your HTML document. This will include necessary CSS for basic styling.
<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
Creating the HTML Structure
Create the basic HTML structure for the curve generator, including the SVG element and necessary elements for points and controls.
<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>
<script src="./script.js"></script>
Styling with CSS
Add CSS styles to visually represent the SVG elements, control points, and the curve itself.
* {
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;
}
Implementing JavaScript Logic
Implement the JavaScript logic to handle the dragging of control points and update the SVG path dynamically.
/*
* 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 Svg Cubic Bezier Curve Generator In Javascript. If you have any questions or suggestions, feel free to comment below.
