Jump to content
GreenSock

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

huge stroke-dasharray value w drawSVGplugin

Recommended Posts

Inspect the codepen preview window to see the values on the svg. 

 

I've tried exporting from Illustrator and from Figma (using SVOMG), but no difference in the result.

 

 

Anyone an idea how to fix this?

 

 

the values:

 

element.style {
stroke-dashoffset: -1;
stroke-dasharray: 1e-05px, 11px;
}
 
 
 
 

See the Pen vbMZRQ?editors=1111 by flowen (@flowen) on CodePen

Link to comment
Share on other sites

Hi @flowen ... I'm not seeing much of anything in the results of your pen, so I'm not sure what to look for.

 

But I do see a few issues off the bat. Your DrawSVG tweens are calling the SVG directly, but draw SVG expects a path, rect, ellipse, line, polyline, or polygon.

 

Also, I'm sure how well this will play with xlink to the symbol path. Any way you can do this with one SVG alone?

 

  • Like 3
Link to comment
Share on other sites

hi @Shaun Gorneau thanks for your reply. 

 

The reason I use definitions is because I want to use the letters more often.. I could do without, but would prefer to make this work. 

 

I see.. I made a rooky mistake ? alright, I adjusted it to the path, but it's still not drawing it. I also simplified the example a bit. 

 

 

in the edited codepen I still see 

stroke-dashoffset: -2476.59; stroke-dasharray: 1e-05px, 2486.59px;

 

(use the inspector and check the path of the svg)

 

I'm not sure if stroke-dasharray is supposed to have such values or it's a bit strange. 

 

Link to comment
Share on other sites

Your path is actually a bunch of segments which is messing up the DrawSVG plugin. Here's a fork of your pen with some changes to the path d attribute.

 

See the Pen jdRvmm by PointC (@PointC) on CodePen

Hopefully that helps a bit. Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

hi @PointC thanks for fixing this! I wonder how you fixed this, because I want to do this for a bunch of letters :)

Link to comment
Share on other sites

You had a filled path (made up of multiple segments) in your demo so I pulled it into Adobe Illustrator and used the pathfinder tool to unite everything into one path. I then added a stroke followed by outlining the stroke and exporting a new SVG. If you start with a filled path (even though it looks like a stroke) and then add a stroke, you'll get a stroke on each side of that path which is probably not what you're going for here.

 

The easiest way to get your desired result would be:

  • Create the letter as you like and set the fill to none and stroke to any color. 
  • Create outlines from the letter(s) (right click and 'create outlines' or Shift+Ctrl+O)
  • Export the SVG

You may also want to add a background rectangle so you don't get unexpected sizes and coordinates. I wrote about that here:

I also have a thread about exporting from AI which you may find helpful.

The other thing you'll need to decide is how to handle letters with a closed counter. You can export the SVG path as one compound path so the main outline and the bowl (stroke that makes up the hole in the letter) animate at the same time. You can also animate them separately. If you want to do the latter, you need to release the compound path after creating outlines and then create a new compound path for each piece. Object --> Compound Path --> Make. In this example you can see that the first A is one path and the second is two separate paths.

 

See the Pen MLdrgb by PointC (@PointC) on CodePen

 

The other thing you may want to change is the start point of the stroke(s). That too is easily done in AI before you export. I wrote a whole post about it here:

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Wow, golden nuggets of wisdom, @PointC. Thanks for taking the time to write that up. 

  • Like 2
Link to comment
Share on other sites

I have to make up some ground after my hiatus. 

 

If I don't pull my weight around here, @Carl may show up at my house and repo my Moderator Badge. :ph34r:

  • Like 1
  • Haha 1
Link to comment
Share on other sites

5 minutes ago, PointC said:

If I don't pull my weight around here, @Carl may show up at my house and repo my Moderator Badge. :ph34r:

 

 @Carl called off Vinnie and his thugs now that you're back. ;)

  • Like 2
  • Haha 1
Link to comment
Share on other sites

@PointC This IS Amazing! Thanks so much for the extra effort of explaining! I should've inspected the path a bit more closely and I would've recognised the fills and double paths. Your other sources are amazing extra help :)

 

This shows me how illustrator outshines Figma (with figma I have to do a lot of manual work). 

 

and thanks @Carl for putting some of that pressure ✌?;) 

  • Like 4
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.
×