Draw a simple line using DrawSVGPlugin

[adiusz]

Hello there.

I'm trying to draw these paths you can see in the example, but instead if simply drawing paths I managed to draw "border" around the path. 

I would really like these paths to just start from one point and finish in another in straight line.

 

Just like here:

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

 

Also, is there any simple way to reverse paths so it draw from left side to right instead of right to left? 

See the Pen MWebrxq by adiusz (@adiusz) on CodePen

[ZachSaucier]

Hey adiusz.

 

2 hours ago, adiusz said:

I would really like these paths to just start from one point and finish in another in straight line.

This just comes down to asset prep. Instead of making your lines as paths that go around the edges, make each as a single line only going in one direction. Then it will work the way you want it to.

 

2 hours ago, adiusz said:

is there any simple way to reverse paths so it draw from left side to right instead of right to left?

Again you can fix this when prepping your assets. DrawSVG goes in the direction of the way you create your path. @PointC wrote about the subject on his motionticks website. But you can also use DrawSVG to reverse the direction by switching the start and end values.

[adiusz]

Thanks @ZachSaucier, now it's more clear to me. I prepared my assets as you described and it works like a charm. 

 

But one question about this:

On 10/22/2020 at 3:07 PM, ZachSaucier said:

But you can also use DrawSVG to reverse the direction by switching the start and end values.

How can I exactly do that?

[mikel]

Hey @adiusz,

 

Both test lines have the same coordinates.
You can control starting and ending position like  gasp.fromTo ("# test02", {drawSVG: '100%'}, {drawSVG: '0%', duration: 3, ease: 'none'}, 0)

 

See the Pen 202a4d742f9e635df9057f229e7078e9?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy drawing ...

Mikel

[ZachSaucier]

@mikel I love the halo!

[mikel]

 

Hey Zach,

 

When you get to my age, you'll get one too.

[adiusz]

thank you @mikel