JSFiddle - React, Tailwind, and code Playground

by tnhu

HTML

<h1>SVG Cubic B&#233;zier Curve Example</h1>

<object id="svg" type="image/svg+xml" data="cubic.svg.xml" class="C">

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="styles-svg.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499 499" preserveAspectRatio="xMidYMid meet">
	<title>SVG curve</title>
	<desc>example curves in SVG</desc>
	<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>
</object>
<pre id="code">code</pre>

<p>This demonstration shows how cubic b&#233;zier curves can be drawn on an SVG. </p>

<p>Drag the line ends or the control points to change the curve. Click the curve to toggle the fill.</p>

<p>For more information, please refer to:<br />
<a href="http://www.sitepoint.com/html5-svg-cubic-curves/">How to Draw Cubic Bezier Curves on HTML5 SVGs</a></p>

<p>See also:<br />
<a href="http://blogs.sitepoint.com/html5-svg-quadratic-curves/">How to Draw Quadratic B&#233;zier Curves on HTML5 SVGs</a><br />
<a href="http://blogs.sitepoint.com/svg-path-element/">How to Create Complex Paths in SVGs</a></p>

<h2>Disclaimer</h2>
<p>The code was developed by <a href="http://twitter.com/craigbuckler">Craig Buckler</a> of <a href="http://optimalworks.net/">OptimalWorks.net</a> for <a href="http://sitepoint.com/">SitePoint.com</a>.</p>

<p>This code can be used without any restrictions but please don't expect 24/7 support! A link back to SitePoint.com is appreciated.</p>

CSS

/* CSS */
body
{
	font-family: arial, helvetica, sans-serif;
	font-size: 85%;
	margin: 10px 15px;
	color: #333;
	background-color: #ddd;
}

h1
{
	font-size: 1.6em;
	font-weight: normal;
	margin: 0 0 0.3em 0;
}

h2
{
	font-size: 1.4em;
	font-weight: normal;
	margin: 1.5em 0 0 0;
}

p
{
	margin: 1em 0;
}

#svg
{
	display: inline;
	float: left;
	width: 500px;
	height: 500px;
	margin: 0 10px 10px 0;
	background-color: #fff;
}

#code
{
	display: block;
	width: auto;
	height: 4em;
	font-family: monospace;
	font-size: 1.2em;
	padding: 2px 4px;
	margin: 0;
	color: #555;
	background-color: #eee;
	border: 1px solid #999;
	overflow: auto;
}

/* SVG styles */
path
{
	stroke-width: 8;
	stroke: #000;
	stroke-linecap: round;
	fill: none;
}

path.fill
{
	fill: #3ff;
}

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

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

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

JavaScript

/* 
 * SVG curve example
 *
 * By Craig Buckler,		http://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...