pathstudio

Yes! Thanks again. I do appreciate the help and I am excited to work with this further and learn a bit of GSAP.

Thanks Jack! I like that movement a lot. I may just run it like that. But I'm curious about the possibility of having a similar movement that follows a users cursor after the initial animation plays. So one of the needles would always move to point towards the cursor. And maybe keep the mouse / cursor follow animation within a certain area around the logo. Animating this logo in this way really adds another layer of meaning. I'm very happy with how it is coming along. Thanks for the help.

Thanks for the suggestion. Setting stroke-linecap to round just resulted in a rounded corner only at the corners that were notched before. If I set stroke-linecap to square, I receive a much better result for my needs. I end up with one tiny aberration on the "A" in my logo. I tend to be nit-picky but I can probably live with that! Now I can move on to making the diamond shaped points move like compass points, pointing to a users mouse cursor or finger location. It would great if the pointed form tottered on the Z axis like a real compass. Time to go on a search for how to do that. Any suggestions for compass like animation greatly appreciated but probably best for another post.

Thanks for the quick responses! I am so new to SVG that I'll need to educate myself further in order to understand how I can apply the fix of modifying the path commands in the way outlined. If anyone is willing to explain exactly how I apply that fix to my specific codepen, it would accelerate my understanding and be much appreciated.

Hello and thanks in advance to anyone who helps. I have a simple logo that I'm using DrawSVG on. I started using CSS only using stroke-dashoffset and stroke-dasharray Then I forked the DrawSVG CodePen to try that and added in my logo (see codepen link, look really closely to see the notches in the line on the codepen and reference my attached image). Both CSS only method and DrawSVG use stroke-dashoffset and stroke-dasharray to animate the line drawing effect. Notches problem: I believe it is stroke-dasharray that causes the notches in my path outline. (See attached image for notches). Once stroke-dasharray is at 0 the notches go away. I've also tried to save the svg with paths grouped in various ways out of adobe illustrator. I'm brand new to SVG's and animating them. Fingers crossed that someone has a fix for me.