How to create smooth connections with curves using SVG?

Question

I want to draw the FID trajectory curve using SVG, similar to red curve: http://chem.ch.huji.ac.il/nmr/techniques/1d/pulseq_files/fid.gif

My code is presented:

<svg>
<path d="M 180 45 q -10 10 0 20 q 40 20 -20 20 a40,20 0 1,1 -20,20 a60,30 0 1,1 -20,35 a80,30 0 1,1 -10,40 " stroke="blue" stroke-width="2" fill="none" />
</svg>

Unfortunately, the curves at the junction places are sharp. I can not make a smooth connection of curves.

Do you know, how to solve my problem?

How are you creating your svg? Your example uses arcs, which won't work in this case because a spiral can't be drawn using sections of ovals. The curvature doesn't change in the right way. You will have to use bezier curves. — aptriangle

enxaneta enxaneta · Accepted Answer · 2019-06-23T10:57:53

What you intent to draw is a conical helix or conical spiral. Basically I'm calculating the points for the helix, and next I'm using the points to build the d attribute for the path.

let r = 30;
let ry = [];// the array of points used to draw a conical helix

function getPoints() {
  var a = 0.8;// angle for the tilt

  for (var t = 0.1; t < 2 * Math.PI; t += 0.008) {
    let x = r * t * Math.cos(6 * t + a);
    let y =
      (r + r / 2 * Math.cos(a)) * t -
      r / 2 * Math.sin(a) * t * Math.sin(6 * t + a) -
      150;

    ry.push({ x, y });
  }
}

getPoints();


//using the points to build the d attribute for the path
let d = `M${ry[0].x},${ry[0].y}L`;

for (let i = 0; i < ry.length; i++) {
  d += `${ry[i].x},${ry[i].y} `;
}

ch.setAttributeNS(null, "d", d);

svg{border:1px solid; width:90vh}

<svg viewBox="-225 -225 450 450">
  <path id="ch" stroke="red" stroke-width="2" fill="none" />
</svg>

How to create smooth connections with curves using SVG?

1 Answers