Share Posted July 12, 2021 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 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted July 12, 2021 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 3 Link to comment Share on other sites More sharing options...
Share Posted July 12, 2021 ... 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now