How to draw a path in svg with different stroke-width?

[NBH]

I have an ArrayList of all the coordinates to draw a path and another ArrayList of all the stroke-widths ( width from point 1 to point 2, point 2 to point 3, ... point n-1 to point n) from one coordinate to the next one. When I will open the resultant svg file, I want to show how the path was created using animation and the result will show a path with dynamic widths in it based on the values that I have stored. I have been trying to solve this issue since last month. It will be really helpful if someone could provide me some direction to solve this problem.

[Ian]

I would put what you have on a jsfiddle as its not clear whats in the svg.

You can't have a single path with different strokewidths, unless I'm missing something, so you would have to have a separate paths or line for every different part that has a different width.

[NBH]

Below is the jsfiddle. This is working for me, not sure how to do it in here. 

http://jsfiddle.net/3vCDp/5/

This results in a path which looks similar to a 'happy smile'. I am saving all the stroke-widths when it is being drawn and widths may vary while anyone is drawing the gesture using finger. I want to show the path with dynamic stroke-width. I think this can be achieved using JS. But I do not know how.

I have attached the svg file here. Run it on Chrome to see the animation.

[Ian]

Hmm not really sure whats supposed to work, the path itself is invalid, its just bunches of coordinates rather than a path (maybe thats the point).

I get the point of animating stroke-dashoffset, that can work, but it wouldn't give you different widths.

I think you would need to take a js array or object of your points and widths and build separate paths as you go, thats if I understand it right.

So I would suggest building multiple paths from points first in javascript/Snap.

I think something is being lost in translation somewhere possibly as well. 

[NBH]

Thanks. I will look into this. 

I am not sure how to express this issue clearly, but I think it should be clear if you see the source code from the attaced svg file.

[NBH]

Hi @Ian, Can you provide me with a sample source code of how to draw multiple paths in Javascript? 

[Ian]

Well something like this, was what I was getting at... http://jsfiddle.net/bfzsaL3m/2/

That has varying increasing widths, but really you want continuous curves etc typically, but you can't have that and varying widths on a single path. Thats why I don't fully understand what you are trying to achieve. Maybe it would help if you could show an example already out there which you have seen.

[Ian]

Thats not to say, you can have a path which looks like a gradually changing thing (where the entire fill covers it), but the path itself wouldn't be varying widths.

[NBH]

Thanks a lot. I think I can fix my problem using this technique, I did not have any idea regarding the Snap path (s.path). This was really helpful.