Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
swampthang

Drawing in a mask doesn't completely cover line

Recommended Posts

Sorry if this is a dupe but couldn't find anything specific to it searching.

 

The codepen uses some code that Blake came up with to animate color lines and draw out masks for each path to reveal it, and then draw the masks back in to cover them back up.

 

The effect is that it looks like multi-color animating lines are being drawn in, rotating a few times and then drawn back out.

 

It works great except for this - when running the codepen you'll see at the very end, there are little remnants of the underlying paths. I've monkeyed around with stroke-miterlimit and a few other things but am still unable to figure out how to completely cover the paths with the correct masks. It varies with different SVGs too which makes me think it has to have something to do with miter settings.

 

Has anyone encountered a similar issue and found a solution?

 

See the Pen QEPvzq by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Hello,

 

Have you looked at this tip from Blake in the SVG Gotchas topic.. using the SVG maskUnits attribute on your <mask> element

 

http://greensock.com/forums/topic/13681-svg-gotchas/page-2#entry65150
 

maskUnits="userSpaceOnUse"

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

 

You have two options for maskUnits:

  • userSpaceOnUse
  • objectBoundingBox

x, y, width and height represent values in the current user coordinate system in place at the time when the <mask> element is referenced (i.e., the user coordinate system for the element referencing the <mask> element via the mask attribute). x, y, width and height represent fractions or percentages of the bounding box of the element to which the mask is applied. A bounding box could be considered the same as if the content of the <mask> were bound to a "0 0 1 1" viewbox.

 

Resources:

SVG maskUnits attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/maskUnits

 

:)

Link to comment
Share on other sites

Yea, maskUnits was a lifesaver for straight line masks - very much worth mentioning here again for someone who encounters that problem later. (That helped an issue I was having where a mask wouldn't work on a straight horizontal or vertical line converted to a path) 

 

In my app I do add it to the mask like... 

newMask.setAttributeNS(null, "maskUnits", "userSpaceOnUse");

The codepen didn't have it in there but it doesn't change the remnant issue. I went ahead and added it to the codepen though, for good measure.

Link to comment
Share on other sites

What browser and browser version you seeing this issue on?

 

and

 

What OS and OS version you seeing this issue on?

 

Are you talking about that dashed border that shows after page load then disappears?

Link to comment
Share on other sites

I replaced the SVG in the codepen with one that has a wider stroke-width and am seeing that the issue has something to do with remnants appearing where 2 parts of the path overlap. In the screenshots below I added arrows to where the path overlaps itself and, after drawing in the mask, it doesn't hide that particular piece. Also, I noticed that each section of the path for the intersecting area changes "z-order" with each loop.

 

Here's while it's looping the colors...

Screen%20Shot%202016-09-27%20at%202.13.2

 

Here's right after drawing the masks in...

Screen%20Shot%202016-09-27%20at%202.13.2

Link to comment
Share on other sites

We must've posted about the same time :-)

 

I'm using Mac OS X 10.5.5 using the latest version of Chrome - Version 51.0.2704.84 (64-bit) - but it does the same thing in Firefox. 

 

Yea, see the post above

Link to comment
Share on other sites

Was hoping this wouldn't be such an obscure mystery.

Link to comment
Share on other sites

Hello, have you tried to isolate your animation by just one letter to make it easier to debug since you have a lot of code in there which makes it harder to debug and help you. Thanks!

  • Like 1
Link to comment
Share on other sites

Sure. Sorry, it takes all that (at least I think it does - I'm definitely not the authority) to do this animation. Breaking it down:

  • addMasks() - does just that - add a mask for each path, which now will just be one path.
  • inAndOut() - parses through each path assigning and animating mask and path clones for each color.

The place where it breaks, as mentioned above, is where the path overlaps itself. As the main mask draws in, it doesn't cover that area.

 

Here's just the letter S - 

See the Pen QEPvzq by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Hi Swampthang,

 

Unfortunately, it seems your reduced "S only version" still has about 100 lines of code that would take a considerable amount of time for us to unravel and the SVG that your code generates remains fairly complex. 

 

From a cursory glance this really seems like it boils down to a browser rendering oddity. 

 

Are you saying there is a bug in DrawSVG that we need to look into? If so, we will do our best to help but its important that it can be illustrated in a simpler fashion.

 

Thanks!

  • Like 1
Link to comment
Share on other sites

Hi, Carl. Let me see what I can do. I don't know what the issue is honestly. That's why I presented this to the real brains to see if it's possible to root out the issue.

Link to comment
Share on other sites

Geez! I thought we had this solved in this thread. Apparently, I'm just not cut out to be an SVG guru. I might need to figure out a new career path now.

 

Here are somes pens I forked over the past couple of weeks that might be useful. They don't use GSAP, but there are some interesting things going on in them. For example, I didn't know you could use a percentage % as the length for a stroke dash array/offset. 

See the Pen 89946beb2e7547138c5341951244811b by osublake (@osublake) on CodePen

See the Pen 8d46562aac48c9d8d98de05d93073324 by osublake (@osublake) on CodePen

See the Pen c5bb778b708b912118f70089845596e1 by osublake (@osublake) on CodePen

See the Pen e82021c97df20816b8fc78320652bff9 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Wow, that's crazy! So, no creating a bunch of masks and what-not?

Link to comment
Share on other sites

I'm not sure yet. I tried messing with some of those techniques, but wasn't able to make any of them loop like your animation. They all stop at some point and either reverse or just start over.

Link to comment
Share on other sites

Yea, I'm thinking there's gotta be an efficient middle ground somewhere in all this.

Link to comment
Share on other sites

The browsers are innocent.

 

DrawSVG is innocent.

 

The culprit is....

.

.

.

.

.

.

.

.

.

.

.

.

.

stroke-width! In the mask, with its thickness. (Extra browny points for whoever gets the reference).

 

 

Coincidentally, there was another question just yesterday where the thickness of the stroke was causing issues in a mask. 

 

The artefact that you are seeing is your stroke being shown by the leftover mask when it gets to the end. I don't have the time to go over in fine detail because I would have to deconstruct your masking and path building functions.

 

Just slow down your animation and watch as the paths move and overlap themselves, then, play around with the thickness of your stroke, you will see that at a value of 2, you don't have any more issues, from 3 on, little artefacts start showing.

 

See the Pen mABPKd?editors=1010 by dipscom (@dipscom) on CodePen

  • Like 1
Link to comment
Share on other sites

Hmmmm... this isn't good. That means your path cannot have any sharp angles if you want a fat stroke.

Link to comment
Share on other sites

Yea, Dipscom, you're right. That's definitely the problem - like I said above (where the screenshots are) ... 

...am seeing that the issue has something to do with remnants appearing where 2 parts of the path overlap.

 

 

The reason a stroke-width of 2 works is because it prevents overlap, but, I can't control whether or not a path is going to overlap somewhere. Like Blake said, "That's not good." I tried playing around with -webkit-mask-composite thinking possibly the masks overlapping could be resulting in an artifact. I'm not sure I quite understand it yet. If this gets resolved it could be a good candidate for your SVG gotcha's.

Link to comment
Share on other sites

It looks like you might be at the mercy of the browser for how it handles those overlaps.

 

I think a plugin/utility that can calculate variable width strokes would be able to solve this. I've toyed with the idea using canvas and SVG. They are constructed using tangents so the ends wouldn't be clipped as a right angle, which is what the browser is currently doing.

See the Pen oLKWyd by osublake (@osublake) on CodePen

 

Simple animation of that path.

See the Pen ff01eba4901b9adda677bf52073be52b by osublake (@osublake) on CodePen

 

And a full-blown, physics based drawing demo using that concept.

See the Pen wzJGxx by osublake (@osublake) on CodePen

 

Ideally, you should be able to do stuff like this...

 

 

If you think this might be useful, you should make a feature request. I know a lot of people would find this useful.

 

  • Like 3
Link to comment
Share on other sites

Wow, Blake. Yea, variable width stroke animation would be a crazy good feature. And, yea, I can see how that would eliminate the overlap issue. Where would I enter a feature request?

Link to comment
Share on other sites

I just start a new topic. Here's what a search for "feature requests" brings up. 

http://greensock.com/forums/index.php?app=core&module=search&do=search&fromMainBar=1&search_app=forums:forum:11&search_term=feature%20request

 

I've already brought this up with Jack, so he has some background on the issue, but it helps if other members of the community voice their opinion. The next version of GSAP has some new functionality that could possibly make implementing this much easier than the way I did it in those demos.

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.
×