Chrissi | Freaky
Explore posts from serversKPCKevin Powell - Community
•Created by Chrissi | Freaky on 9/23/2024 in #front-end
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?
3 replies
KPCKevin Powell - Community
•Created by Chrissi | Freaky on 9/20/2024 in #front-end
Textmarker Highlight Effect (Stretch SVG over width of a span element)
Hey there! I want to make an animated text marker highlighter effect for headings on my website. I made some SVG's that I can animate using
stroke-dashoffset
, but if I have more than one short word, the SVG only centers in the text but does not grow in width. I tried setting width/height and some other attributes, but when it grows in width, the height grows to preserve the aspect ratio and overflows to the bottom of the span. Can anybody tell me how I can make the SVG "fill"/"stretch" in the width of the container? (Any other improvements of my code are appreciated too.)
Here is my code so far:
12 replies