Jump to content
GreenSock

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

MorphSVG - show dots at vertices

Recommended Posts

What would be the best approach to render dots, that follows the vertices of the SVG path?

 

- like a simple version of the points (not tracers) seen in the demo: https://codepen.io/GreenSock/pen/vvjOGq

Share this post


Link to post
Share on other sites

Hey @knalle,

 

I am not sure what you want to achieve exactly:
that follows the vertices of the SVG path.

 

If the distances are the same, then there is the possibility to operate

with stroke-dasharray .

 

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

 

Or hand coded ...

 

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

 

Happy tweening ...

Mikel

 

  • Like 1

Share this post


Link to post
Share on other sites

That almost works - but I need more control. I was thinking of looping through path and and draw each vertex as a circle?

Share this post


Link to post
Share on other sites

You could modify the demo that you linked to remove the line functionality. I quickly commented out some lines to produce this, but you could probably strip a little bit more logic if you'd like to (especially in relation to the controls).

 

See the Pen NWKbadW?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3

Share this post


Link to post
Share on other sites

Good idea... most of it is related to the lines/tracers. Will try that :)

Share this post


Link to post
Share on other sites

If you strip it down to just the points it'd be helpful if you posted the demo back in this thread for others (like myself) to use :) 

 

I guess Jack may have a version like that somewhere in his chamber of secrets.

  • Like 1

Share this post


Link to post
Share on other sites

@knalle sure, if you provide a reduced test case in codepen or something, I don't mind taking a peek. There may be a tool in MorphSVGPlugin that'd make it a bit easier. :)

Share this post


Link to post
Share on other sites

Here is a codepen where I have removed the parts that are not needed for the anchors: 

See the Pen rNBWbRx by knalle (@knalle) on CodePen

But it can probably be improved.

  • Like 2

Share this post


Link to post
Share on other sites
5 hours ago, knalle said:

Here is a codepen where I have removed the parts that are not needed for the anchors: 

I'm a little confused - do you have what you need now or were you still looking for some help? I thought you were gonna post something of your own that you were trying to add anchors to, but it looks like you just copied one of our codepens that already had anchors showing. 

 

If you need some help with something of your own, just let us know and we'd be glad to take a peek. Otherwise if you're all set, even better! :)

  • Like 1
  • Haha 1

Share this post


Link to post
Share on other sites

I have all I need for now, thanks :D

 

I wanted the MorphSVG features but with the ablity to have vertices show up as dots.

So the posts from  @mikel are excellent for this thread, though not working with MorphSVG.

  • Like 2

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.

×