Jump to content
GreenSock

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

Set SVG Path Length dynamically based on Text length

Go to solution Solved by Cassie,

Recommended Posts

Hi everyone, 

 

I would like to create this curved button underline hover effect. Is there a way to set the length of the SVG Path based on the text length in the <span> element? It should look like in the screenshot down below.

Screenshot 2021-07-12 at 11.22.05.png

See the Pen dyWpxgx by codekyt (@codekyt) on CodePen

Link to comment
Share on other sites

  • Solution

Hey Nattha

Sure! There's a few ways you could approach this.

1 - easy - Use PreserveAspectRatio to 'crop' the left tail of the svg depending on the length of the word. (Apologies for the scruffy path, but you get the idea)

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

See the Pen JjNbbqX by GreenSock (@GreenSock) on CodePen



2- actually dynamically change the viewBox and path values. Harder - It'll help if you have a absolute path and then you can change the point on the tail end without affecting the rest of the points.

This GUI is really helpful for that - https://lea.verou.me/2019/05/utility-convert-svg-path-to-all-relative-or-all-absolute-commands/

It's a bit beyond the scope of these forums to help with this logic as we try to focus on GSAP related questions - But obviously anyone's welcome to jump in.

I also have an SVG slack channel where people would be certainly be happy to help!

https://join.slack.com/t/svg-animation/shared_invite/zt-ld8zodr8-logjxuHIrrssl7EbB_XJHg
 

  • Like 3
Link to comment
Share on other sites

 

... another option: hand-coded path.

Easy to customize when there are just a few buttons.

 

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

 

Happy tweening ...

Mikel

 

 

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