Jump to content
Search Community

Draw SVG Problem: Notch in stroke at corner of path.

pathstudio test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.


See the Pen BWPXGj by Pathstudio (@Pathstudio) on CodePen

Link to comment
Share on other sites

I'm not 100% sure, but I think the miter makes it worse, like here...



A fix I came up with requires modifying the path commands, dropping the z and adding a new line vertex.

From this...
<path d="M 100 100 L 300 100 L 200 300 z" />

... to this
<path d="M 100 100 L 300 100 L 200 300 L100 100 L300 100" />

The only problem with this approach is that it draws an extra line segment, so it may throw some of your timing off. Notice how there is a delay in the yoyo because of the extra line draw.

See the Pen 295e21ea05095919e7d81cac735d12b6 by osublake (@osublake) on CodePen



  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Does it help to simply change the set the stroke-linecap to "round" or "square"? You can just do that in the CSS or as an attribute. Example: 

path {

There was a visual explanation here that might help: http://jonibologna.com/using-svg-stroke-attributes/ and https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes and http://tutorials.jenkov.com/svg/stroke.html

  • Like 3
Link to comment
Share on other sites

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.



Link to comment
Share on other sites

I'm not entirely sure I understand the effect you want, but here's a simple crack at a custom spinning movement that uses CustomEase to make it pretty simple: 



You can view the ease itself at https://greensock.com/ease-visualizer?CustomEase=M0,0%20C0.114,0%200.097,1%200.314,1%200.48,1%200.386,0.572%200.638,0.748%200.863,0.905%200.754,0%201,0


If you don't want to use CustomEase, you could do something somewhat similar by either stringing together several tweens to different values or by using BezierPlugin to smoothly plot through various rotational values, but I think CustomEase is the cleanest and best performing.


Does that help at all? 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Here's a quick demo of what it could look like if you wanted it to be dynamically influenced by the mouse position: 



I didn't test it on a Microsoft browser, so those PointerEvents may need to be accommodated a bit differently, but hopefully this gives you a nudge in the right direction. 


Happy tweening!

  • Like 2
Link to comment
Share on other sites

HaHa! I don't believe for one second that you've got nothin' better to do. You're probably working on a platform update and 5 awesome new plugins as I type. 


I would take an SVG viewBox camera plugin though. Diaco started one last year when we were all chatting in this thread:




You could give it a cool code name like GreenSock Goggles or GSAP Vision. If it could be ready by Friday, that would be perfect as I've got three new projects that could use it.



  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...