Any known trick to apply a brush effect to a stroke?

I remember reading about brushes as a feature request in the forum.

Today I met a client that possibly need that feature.
In a part of the screen they gave me there is a signature made with Illustrator / affinity, but as bitmap file.
They want the signature to be animated with other elements, then if I simply use stroke I will not capable to show the previous texture.

After taking a look at this library* I was thinking that maybe it’s possible to find a solution applying some code, but I’m not an expert in that area. *(fyi: http://fabricjs.com/freedrawing)

Maybe anyone have had previously a similar problem, ideas are welcome.

Edit: changed video format.

I’m not understanding this?

The pencil tool + line draw can be used to animate a signature:

2 Likes

Yep! Sorry, maybe I don’t explain myself.
I’m using vector shape plus line draw for animating, that’s a wonderful feature.

I was thinking if it’s possible to apply brush effects to line / stroke.
I was wondering if someone have had this need previously and know any trick to apply brushes effect to the line / stroke.

I’m taking a look at the docs of Fabric Brush or Brushstroke:


1 Like

It looks like the brushstroke link above has an API which even takes a path. You may be able to supply the path from the SVG Hype creates into that. However in running the demos from that site, I found they easily hung Safari.

The fabric-brush uses a canvas renderer and didn’t look as API centric, but i’d imagine if you got into the weeds with it you might be able to get the points from a Hype path and supply them to that code.

I did a quick search just to see if there were any other libraries that could simply do stamps or effects around the types of SVG paths Hype uses, but came up empty.

1 Like

What I’m trying it’s exactly that, obtain the brush style.

After reading and taking in consideration, seems a bit difficult (too much resources for a simple signature) then I’m in the last point you wrote: searching for a library of brushes. If it exist.

If I find a solution, I’ll share it.

Look at this code pen by Lucas Bebber… it might be of help:

The easier, but tricky way I found is that one:

But, not involving “texture” style, only changes in width aspect of every path.

Thanks for the source @MaxZieb, I will take a look later.

1 Like

Hi. there’s a workaround to achieve what you want providing that the signature is on a uniform background : draw a vector path over the img of your signature (the color of the background so it act as a mask) and animate its offset so it reveals the signature.

1 Like

just for the brushstroke-library. as @jonathan wrote it works with any svg-path. so you can easily use it with hypesvg : hypePlusBrushstroke.hype.zip (17.8 KB)

2 Likes

Very nice! I think this will be a good thread/example to show on the public-facing forums when v4 is live.