<h1>SVG Path Bezier Curves with S curve</h1> 
<svg>
	<line id="curve1" x1="17" y1="86" x2="48" y2="26" stroke="black"stroke-dasharray="5,5"/>
	<line id="curve2" x1="60" y1="122" x2="96" y2="93" stroke="black" stroke-dasharray="5,5"/>
	<line id="scurve" x1="212" y1="13" x2="285" y2="128" stroke="black" stroke-dasharray="5,5"/>
	<path id="curveD"
		fill="none"
	       	stroke="#333333"
	       	stroke-width="3" 
		d="M17,86 C48,26 60,122 96,93 S212,13 285,128"/>
	  </svg>
	  <h2>&lt;path d="<span id="heading"></span>" /&gt;</h2>
	  <div>
		<h3>Move</h3>
		<lable for="path-mx">Move X</lable>
		<input id="pathMx" type="range" min="1" max="300" value="17" oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)">
		<lable for="path-my">Move Y</lable>
		<input id="pathMy" type="range" min="1" max="150" value="86" oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)">
	  </div>
	  <div id="cCurveDiv">
		<h3>C curve</h3>
		<lable>Curve 1 X</lable>
		<input id="cStartX" type="range" min="1" max="300" value="48" oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)" />
		<lable>Curve 1 Y</lable>
		<input id="cStartY" type="range" min="1" max="150" value="26" oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)" />

		<lable for="x">Curve 2 X</lable>
	  	<input id="cCurveX" type="range" min="1" max="300" value="60" oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)">
	  	<lable for="y">Curve 2 Y</lable>
		<input id="cCurveY" type="range" min="1" max="150" value="112" oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)">
		<lable>End X<lable>
		<input id="cEndX" type="range" min="1" max="300" value="96" oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)" />
		<lable>End Y<lable>
		<input id="cEndY" type="range" min="1" max="150" value="93"  oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)"/>
		<br>
		<lable>S X 1<lable>
		<input id="sX1" type="range" min="1" max="300" value="212"  oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)"/>
		<lable>S Y 1<lable>
		<input id="sY1" type="range" min="1" max="150" value="13"  oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)"/>
		<lable>S X2<lable>
		<input id="sX2" type="range" min="1" max="300" value="285"  oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)"/>
		<lable>S Y2<lable>
		<input id="sY2" type="range" min="1" max="150" value="128"  oninput="changed(pathMx,pathMy,cStartX,cStartY,cCurveX,cCurveY,cEndX,cEndY,sX1,sY1,sX2,sY2)"/>
	</div> 

svg path, svg line {
	transition: d 0.35s; 
}
svg{
	border:1px solid red;
}
body{
	padding:2rem;
}

		let data = `M17,86 C48,26 60,122 96,93 S212,13 285,128`
		const heading = document.getElementById("heading")
	
		const cCurveDiv = document.getElementById("cCurveDiv") 
		const svgPath = document.getElementById("curveD")
		heading.innerHTML = data
		function changed(mx,my,csx,csy,cx,cy,cex,cey,sx1,sy1,sx2,sy2){
			data = `M${mx.value},${my.value} C${csx.value},${csy.value} ${cx.value},${cy.value} ${cex.value},${cey.value} S${sx1.value},${sy1.value} ${sx2.value},${sy2.value}`
			heading.innerHTML = data;
			svgPath.setAttribute("d", data)
			
			let line1 = document.getElementById("curve1")
			let line2 = document.getElementById("curve2")
			let sline = document.getElementById("scurve")
			line1.setAttribute("x1",mx.value)
			line1.setAttribute("y1",my.value)
			line1.setAttribute("x2",csx.value)
			line1.setAttribute("y2",csy.value)
			
			line2.setAttribute("x1",cex.value)
			line2.setAttribute("y1",cey.value )
			line2.setAttribute("x2",cx.value)
			line2.setAttribute("y2",cy.value)

			sline.setAttribute("x1",sx1.value)
			sline.setAttribute("y1",sy1.value)
			sline.setAttribute("x2",sx2.value)
			sline.setAttribute("y2",sy2.value)

			console.log(data)

		}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.