SVG Bezier Curve thru points
HTML
<body>
acknowledgement <a href="https://www.particleincell.com/2012/bezier-splines/"> https://www.particleincell.com/2012/bezier-splines/</a><br/>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height=400 width=800 onload="init();">
<script>
<![CDATA[
/* bezier-spline.js
*
* computes cubic bezier coefficients to generate a smooth
* line through specified points. couples with SVG graphics
* for interactive processing.
*
* For more info see:
* http://www.particleincell.com/2012/bezier-splines/
*
* Lubos Brieda, Particle In Cell Consulting LLC, 2012
* you may freely use this algorithm in your codes however where feasible
* please include a link/reference to the source article
*/
var svg=document.getElementsByTagName('svg')[0]; /*svg object*/
var S=new Array() /*splines*/
var V=new Array() /*vertices*/
var C /*current object*/
var x0,y0 /*svg offset*/
/*saves elements as global variables*/
function init()
{
/*create splines*/
S[0] = createPath("blue");
S[1] = createPath("red");
S[2] = createPath("green");
S[3] = createPath("brown");
/*create control points, one more than splines*/
V[0] = createKnot(60,60);
V[1] = createKnot(220,300);
V[2] = createKnot(420,300);
V[3] = createKnot(700,240);
V[4] = createKnot(600,150);
updateSplines();
}
/*creates and adds an SVG circle to represent knots*/
function createKnot(x,y)
{
var C=document.createElementNS("http://www.w3.org/2000/svg","circle")
C.setAttributeNS(null,"r",22)
C.setAttributeNS(null,"cx",x)
C.setAttributeNS(null,"cy",y)
C.setAttributeNS(null,"fill","gold")
C.setAttributeNS(null,"stroke","black")
C.setAttributeNS(null,"stroke-width","2")
C.setAttributeNS(null,"onmousedown","startMove(evt)")
svg.appendChild(C)
return C
}
/*creates and adds an SVG path without defining the nodes*/
function createPath(color,width)
{
width = (typeof width == 'undefined' ? "8" : width);
var...