Jump to content
Search Community

3d lettering without webgl

Dennyno test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi,

even is not the best animating text shadows, is there any way to achieve something like the letter A which they made here:
https://advanced.team/ (in this case they used webgl) using only css // or svg?

I tried adding a mousemove parallax, but seems "too fake" as shadows are fixed. (Looking at the single letter demo)

Guess there's any math magic 🍀

I did also another attempt here too, combining text and a card, changin values.. and trying changin the shadow on mousemove too, but no luck as the math behind is not smooth .

See the Pen ZEavOZZ by DedaloD (@DedaloD) on CodePen

See the Pen Rwjxoxm by DedaloD (@DedaloD) on CodePen

Link to comment
Share on other sites

  • Solution

I think faking 3D with shadows will be hard because of the perspective. But I'm sure someone has done similar to that before on CodePen. When I need to see how an effect is done, CodePen is always the first place I search.

 

4 hours ago, Dennyno said:

(in this case they used webgl) using only css // or svg?

 

So when you are going to learn WebGL? 😉

 

I'm not saying it will be easy, but it is definitely worth it. It opens up whole new world of animation possibilities.

 

  • Like 1
  • Haha 1
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...