Jump to content
GreenSock

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

Draw arrow with moving arrowhead, crossing paths

Recommended Posts

Hello! 

 

I'm working on a site where the designer wants to have an arrow be drawn. The arrowhead should work as a cursor (I guess) following the path as the path is revealed.

 

I found this useful topic, where https://codepen.io/PointC/pen/zrQLvO was very useful. However, I have noticed that whenever a path is revealed in a demo, there are never paths where the path cross itself. I understand that the basic principle is that you have a mask that is slightly bigger than the path it self, so I'm curious if it's possible to draw a line that crosses itself and have it not look super weird.

 

Would be nice to know if it works, before purchasing a membership so that I can access the DrawSVG plugin :)

 

Cheers!

 

 

arrow.png

 

 

arrow.svg

Share this post


Link to post
Share on other sites

Hi @intelligence,

 

Welcome to the GreenSock Forum.

 

See the Pen oRazzE by mikeK (@mikeK) on CodePen

 

Convinced?

 

Happy tweening ...

Mikel

 

 

  • Like 6

Share this post


Link to post
Share on other sites

Wow, that's awesome! Thanks for convincing me :)

 

I forked your pen and tried inputing my path information instead, changing:

<path id="line" fill="none" stroke="#000" stroke-width="10" d="M18.9 128.6c62 33 186 99 311.3 28.5 37.3-21 77.3-108-81.2-92.3-175.5 17.3-6 116.6 54.4 132.5 16.7 4.4 108.5 34.2 209.9-18.6"/>

 

Into:

<path id="line" fill="none" stroke="#000" stroke-width="10" d="M176.100907,1942.8788 C176.100907,1942.8788 167.960858,2039.12068 297.901905,2105.0976 C427.841804,2171.07657 561.938647,2072.46323 493.33163,2034.88 C424.722316,1997.2978 345.401986,2123.37533 484.064187,2150.77708 C622.726387,2178.1778 691,2134.97603 691,2134.97603"/>

 

And I noticed that it stopped working 

See the Pen YbJLzY by anon (@anon) on CodePen

.

 

I'm pretty new with SVG so could some explain to me why that happens? I'm getting these assets from a designer so I'm curious how I need to rework them to make it work (and look) like they want!

 

Thanks again!

Share this post


Link to post
Share on other sites

Hi @intelligence,

 

your path is related to a specific viewbox.

If you set the viewBox to  'viewBox="0 0 3000 3000"' (just for test),

you will see your path. Your path does not fit in the small viewBox.

 

See the Pen LogmMr by mikeK (@mikeK) on CodePen

 

But that´s not what you want.

So create a new line and arrow in Illustrator or Affinity Designer or ...

 

Best Regards

Mikel

 

  • Like 3

Share this post


Link to post
Share on other sites

Very nice @mikel, very nice!

I was wondering whether this can be done in real time and upon release the arrow remains drawn, like in an drawing program, or does this have to be done with a canvas tag and not an svg ?

Share this post


Link to post
Share on other sites
1 hour ago, Afrowave said:

I was wondering whether this can be done in real time

What do you mean "done in real time"?

 

1 hour ago, Afrowave said:

does this have to be done with a canvas tag and not an svg ?

This will probably be answered when you answer the above question, but I don't understand this part either because the demo above is in SVG.

Share this post


Link to post
Share on other sites

Sorry for not being clear. I would like to drag an arrow head from a base and the tail lengthen over time. Upon reaching the target, the arrowhead, onRelease, "sticks to the target and we are left with an stretched out arrow.

 

I called real time because I would be drawing the arrow with a mouse or touch drag. I hope that makes sense.

Share this post


Link to post
Share on other sites

@Afrowave I think this thread may help you out: 

It requires a pretty different technique than the one in this thread.

  • Like 1

Share this post


Link to post
Share on other sites

Wow! Thank you @ZachSaucier. Let me check it out.

 

[Edit] I checked it out. Damn! You guys aren't playing. This is excellent.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×