Juc1 Posted October 11, 2021 Share Posted October 11, 2021 Hi all, In my codepen I am using drawsvg to draw the stroke which has stroke-width:18px - but how would I do this for an uneven stroke something like the Canva logo below? I am not asking can drawsvg draw uneven widths? - I think the answer is no - so I am asking is there some workaround or different approach for this. If i draw the letters with strokes then I can use drawsvg but I am stuck with a fixed stroke-width. If I draw the letters with fills / shapes instead of strokes then I can have the variation in width but I can't use drawsvg. I guess I could use drawsvg and apply masks to thin sections of the stroke but is there a better way with or without drawsvg? See the Pen ExXpBax by Juc1 (@Juc1) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted October 11, 2021 Share Posted October 11, 2021 Yep - masking is the best choice IMHO. I have a whole tutorial about variable width strokes and calligraphy handwriting. I also cover how to handle it when sections of the letters overlap themselves. https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ See the Pen zYqYOrp by PointC (@PointC) on CodePen Happy tweening. 4 Link to comment Share on other sites More sharing options...
Juc1 Posted October 12, 2021 Author Share Posted October 12, 2021 21 hours ago, PointC said: Yep - masking is the best choice IMHO. I have a whole tutorial about variable width strokes and calligraphy handwriting. I also cover how to handle it when sections of the letters overlap themselves. https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Great, thanks 👍 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now