JSFiddle - React, Tailwind, and code Playground

by dievardump

HTML

<svg viewBox='0 0 25 25'>
  <path d="M5 3Q5 3 6.5 6.5Q8 10 8.5 7Q9 4 12 5.5Q15 7 17.5 9.5Q20 12 20 12" fill='none' stroke='#000' />
  <path d="M5 3Q5 3 6.5 6.5Q8 10 8.5 7Q9 4 12 5.5Q15 7 20 12" fill='none' stroke='#f00' />
  
  <path d="M5 3Q5 3 6.5 6.5T8 10T9 4T20 12" fill="none" stroke="#00f" />
</svg>

JavaScript

const points = [[5,3], [8,10], [9, 4], [15, 7], [20, 12]];

let all = `M${points[0][0]} ${points[0][1]}`;
let all2= `M${points[0][0]} ${points[0][1]}`
for(let i = 1; i < points.length - 1; i++) {
	let control = [(points[i][0] + points[i-1][0])/2, (points[i][1] + points[i-1][1])/2];
  all += `Q${points[i-1][0]} ${points[i-1][1]} ${control[0]} ${control[1]}`;
  if (i==1) {
  all2 += `Q${points[i-1][0]} ${points[i-1][1]} ${control[0]} ${control[1]}`;  	
  } else {
  	all2 += `T${points[i-1][0]} ${points[i-1][1]}`;
  }
}
  all += `Q${points[points.length-2][0]} ${points[points.length-2][1]} ${points[points.length-1][0]} ${points[points.length-1][1]}`;
	all2 += `T${points[points.length-1][0]} ${points[points.length-1][1]}`;
console.log(all);console.log(all2);