Set SVG Path Length dynamically based on Text length

[nattha]

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.

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

[Cassie]

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
 

[mikel]

 

... 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