Jump to content
Search Community
Vahan0799 test
Moderator Tag

Recommended Posts

Hello... I'm struggling here with such animation that I can't find a solution with CSS, font-stretch  is not a solution in this case.
At least, is it possible to achieve in web development?

It's stretching letters by different positions and angles. Espcieally it's more visible with letter `E`
Any help or suggestions please ?

image.png.f2dc7962d52b5ae2daf90dd3ed8842c3.png

Link to comment
Share on other sites

Hey! This is either going to be variable fonts or SVG

 

Here's an example of a variable font

Otherwise you can save text as paths in a graphics editor and then stretch out specific parts of it.

The SVG route will be harder to set up, but more performant, less expensive and more flexible.

The variable font way - you're going to be limited by the fonts capabilities, it's quite perf intensive, but it's actual HTML text, so it'll flow with the page and can be set around inline elements.


Hope this helps!

  • Like 2
Link to comment
Share on other sites

2 hours ago, Cassie said:

Hey! This is either going to be variable fonts or SVG

 

Here's an example of a variable font

Otherwise you can save text as paths in a graphics editor and then stretch out specific parts of it.

The SVG route will be harder to set up, but more performant, less expensive and more flexible.

The variable font way - you're going to be limited by the fonts capabilities, it's quite perf intensive, but it's actual HTML text, so it'll flow with the page and can be set around inline elements.


Hope this helps!

Ohhh I see now! So it would be better to ask the animated SVG instead of wasting time on this I guess. THANKS! ♥

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.
×
×
  • Create New...