Tapered Stroke following a path

[cv9]

I want to create a tapered stroke that follows a path on scroll. I don't think there's any options to configure a stroke to be tapered at each end.

 

One possible approach could be to use a shape that acts as the stroke (green shape at the bottom of my image) and have it morph and follow the path. But I'm not sure what the option would be to accomplish that!

 

See image for what I want to accomplish.

[PointC]

Tapered strokes like that won't be easy or performant. You'll either need a bunch of extra elements or have to do something with extra elements in a mask. I think this thread can help.

 

Hopefully SVG 2 will make some of this a little easier. Happy tweening.

[PointC]

PS Steve Gardner also made pop.svg

https://github.com/ste-vg/pop.svg

 

It's a work in progress and it looks like Steve hasn't been back to it for a couple years, but maybe it'll give you some ideas.

[cv9]

Thanks for the suggestions!

 

I was also thinking of creating a line on the path, subdividing it and programmatically constructing the shape of a tapered stroke (see image below - red outline is the shape). But I doubt there's a way to get a sub portion of a path (green in my example) of the full path and the coordinates for the start and end points and all the subdivisions in between plus also getting the tangent data.

 

Anyway, pop.svg looks promising so I'll try that out for now!

 

[PointC]

1 minute ago, cv9 said:

I was also thinking of creating a line on the path, subdividing it and programmatically constructing the shape of a tapered stroke

Yep - that's what I meant by more elements. You'd need to slice it pretty thin for the effect though.

 

If you use something like Red Giant's Trapcode 3D Stroke in After Effects, you see the same thing. Dropping the Step Adjust method in the taper panel from dynamic to none reveals a whole bunch of circle shapes that actually make up the taper. 

 

If you come up with something interesting, please post back. I'd love to see it. Good luck.  

[cv9]

I've attempted to create my own tapered stroke function which generate this kind of stroke along a path from it's center point.

 

https://tapered-stroke.vanyacadogan.repl.co/

https://repl.it/@VanyaCadogan/Tapered-Stroke

You can control the properties by setting them from the drawTaperedStroke() function at the top

• subdivision - the more of these the smoother the stroke
• lineLength - the full length of the stroke line, how many pixels it extends along a path
• lineThickness - the max thickness of the stroke. It won't exceed this thickness

The falloff function controls the shape of the stroke using a mathematical expression, the power n controls the smoothness of the stroke.

 

The algorithm basically subdivides the stroke along its start and end lengths along the path. Using those subdivisions (orange), I can get the heights for them using the falloff function. For each subdivision I get two points that I call "heightPoints" (orange and purple) just in opposite directions and I keep them in separate arrays - "points" for orange points and "oppositePoints" for purple points. 

 

After I've collected all the points from left to right, I reverse the "oppositePoints" and combine them with "points" so they're all in order to be joined together as a path around the stroke. So, I have to collect all the points that make up the red top part of the stroke and then using the oppositePoints to construct the bottom part of the stroke in blue in my image.

 

I still have some issues for values like 1200 if you enter it into the text input in the links I've provided.

The problem seems to be with the normal (inverse of the tangent on the curve) calculation where the sign changes (from positive or negative and vice versa) and seems to be at horizontal turning points