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.
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:
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.
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.
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.
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)
