Using SVG path syntax in paper.js?

Question

With the raphael.js library, paths are described using the SVG path syntax, (e.g. M98.36,214.208l2.186-1.093V210.2l-3.378,0.117l1.174,4.137L98.36,214.208z, which provides a very compact way to create a shape (especially if your shape is drawn with an external application such as Illustrator).

I'm interested in using the paper.js library (not SVG-based), but a first look at the documentation seems to show that paths are built step by step through object methods. This is a very different approach ("path building" vs "path description", one could say), not very suitable to my needs.

So: is there a way to use SVG Paths in paper.js? Or a similar "path description" solution?

Reference:

• http://paperjs.org/reference/path
• http://raphaeljs.com/reference.html#Paper.path

Panjandrum

From a first look it seems like no. I might be wrong tho. – Jaggery

In fabric.js, you can instantiate paths from string that's in SVG format: new fabric.Path('M 65 0 Q 100, 100, 200, 0', { stroke: 'red' }) – Hanky

fabric.js? Yet another library? Thanks, I'll have a look. – Falda

Answer 1

You can use SVG path syntax as described in the Paper.js reference for pathData

var pathData = 'M98.36,214.208l2.186-1.093V210.2l-3.378,0.117l1.174,4.137L98.36,214.208z';
var path = new Path(pathData);

path.strokeColor = 'black';

// Scale the copy by 1000%, so we see something
path.scale(10);

And here as an example as a Paper.js Sketch

Cyclothymia

Thanks, I'll take a closer looks. A welcome addition to Paper.js. – Falda