Stretch letter animation

[Vahan0799 0 Likes (Newbie)]

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 ?

[Cassie 5,122 Likes (Superhero)]

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!

[Cassie 5,122 Likes (Superhero)]

Ooh, here's an example of breaking text into shapes and animating it.

See the Pen vYYGMOB by cassie-codes (@cassie-codes) on CodePen

[Vahan0799 0 Likes (Newbie)]

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! ♥