Any recommendation to use this with a svg path ?

[cyrilchapon]

Hey :)

Looking for a great way to create bezier-splines, I found this and was suprised of the quality of the lib :)

Would you have a recommendation to use it with svg path ?

[freder]

hi,

you mean creating a string that can be used in a <path d="..."> element?

shouldn't be too hard to implement it, taking https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Curve_commands as a reference. or you could use s.th. like https://github.com/d3/d3-path which has a toString() method.

[cyrilchapon]

Yes :) I meant that.

Thanks for the links !

But actually my question was more like :

What to do with "combined" points, when I'm in a logic of a svg bezier with "move" and "curve" commands ?

With the whole stuff, I input an array of 2 (or 3 for 3d) length arrays (x, y points) I end with an array of 4 length array. How could I use it to convert it to M and C commands ?

input

const points = [
  [0, 0],
  [1, 1],
  [2, 0],
];

output

const finalPoints = [ [ [ 0, 0 ],
    [ 0.33333333333333337, 0.5 ],
    [ 0.6666666666666667, 1 ],
    [ 1, 1 ] ],
  [ [ 1, 1 ],
    [ 1.3333333333333333, 1 ],
    [ 1.6666666666666665, 0.5 ],
    [ 2, 0 ] ] ]

I'm struggling at seeing how to use that output (TL;DR; what every index of this array represent)

[cyrilchapon]

Ok, just got this working. Dropping it here as a reference maybe...

Using SVG.js

  const thePathArray = new SVG.PathArray([
    ['M', ...segments[0][0]],
    ...segments.map(segment => ([
      'C',
      ...segment[1],
      ...segment[2],
      ...segment[3]
    ]))
  ])

  const thePathD = thePathArray.toString()