Cover SVG Path with a pattern to create Brushstroke effect
Hey there! I wanted to make a follow-up question to my old question. I want to create an animated text marker highlight effect. I got the animation, but now the "brush" pattern is missing. I only have one straight line. I found this https://blog.tentaclelabs.com/posts/2022/04/draw-a-pattern-along-a-path-using-svg and wanted to follow it (since I don't know any better way. If anybody has a better idea to do this, I would love to hear it). I got this https://codepen.io/FreakeyPlays/pen/BagXXzm without the JavaScript. But my "Marker"/"Pattern" is way too small. How is it possible to make the marker bigger? I thought I could control it using stroke width, but that does not work.
Another idea I had was to draw the path on a tablet using a brush stroke already and try to animate it. But I don't have a tablet right now and can't test if the SVG will have a path with the brush pattern. Has anyone ever tried this?
Tentacle Labs Blog
Draw a pattern along a path using SVG | Tentacle Labs Blog
Recently I wanted to create the effect of a cable for an application I’m working on. The cable should have a textile look, similar to a rope, which is quite common right now (for example the charging cable of the current MacBook Pro). I’m using SVG for rendering, so applying a pattern to a stroke path should be easy, right?
1 Reply
Not sure but do you want to increase the yellow bits? Then increase the markerWidth and markerHeight
The stroke-width is the width of the path