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

[pathstudio]

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

[PointC]

Hi pathstudio 

 

Welcome to the GreenSock forum.

 

Looks to me like you need to adjust your stroke-miterlimit. Here's some more info:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit

 

Happy tweening.

[OSUblake]

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

https://greensock.com/forums/topic/14743-multi-colored-lines-in-svg/?p=63161

 

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

 

.

[PointC]

hmmm.... I believe you are correct. Now that I zoom in on it a bit, miter does indeed make it worse. Interesting....

[pathstudio]

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.

[GreenSock]

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: 

//CSS:
path {
  stroke-linecap:round;
}

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

[pathstudio]

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.

[GreenSock]

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: 

http://codepen.io/GreenSock/pen/207f9f190ad5d94d98e57c51cf35b4af/

 

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? 

[pathstudio]

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.

[GreenSock]

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

http://codepen.io/GreenSock/pen/f623b52416e5ab70aa3d0de03d76c161?editors=0010

 

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!

[PointC]

Nice!

 

Is this 'Custom Code By Jack' week on the forum? I'm gonna get some specs ready and get my order in now.   

[pathstudio]

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

[GreenSock]

Nice!

 

Is this 'Custom Code By Jack' week on the forum? I'm gonna get some specs ready and get my order in now.   

 

Your wish is my command, Craig. Bring it on...I got nothin' better to do

[PointC]

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:

 

https://greensock.com/forums/topic/14142-svg-viewbox-not-behaving-as-expected/

 

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.