Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

So it's not actually 3-D, you shift, scale, and rotate the 2-D elements so it appears 3-D? Or are you rotating it along Z in some way. It's a really good effect. That's some skill!


Yup! Here's the base SVG I started with: https://p195.p4.n0.cdn.getcloudapp.com/items/OAuqBqvx/boat.s...

Everything else is just CSS!


ok for those who were as obsessed with this as i was... I took the base SVG and cleaned up the CSS to try to understand what was going on with the animations

minimal repro: https://svelte.dev/repl/7eea2eba3707414aa62c9ea53b92ad2d?ver...

quick youtube discussion: https://www.youtube.com/watch?v=9wKnZNjdpp8&feature=youtu.be

I didn't get everything bc you can only get so far looking at the output CSS - he used Stylus here to generate most of these https://news.ycombinator.com/item?id=24138573


Nice breakdown, thank you.

This had me in splits:

>> “ Yup, had to get it out quick so I went simple!“

> “What the actual fuck?!”


i mean... am i wrong? lol

thanks


This is a great breakdown


thanks for the breakdown! Now we're all a little bit smarter.


Very cool, indeed!


>So it's not actually 3-D, you shift, scale, and rotate the 2-D elements so it appears 3-D?

You just described 3d projection, aka how most 3d games display a 3d world on a flat monitor.


Yes, yes. The interesting part is performing the transformations manually without tooling.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: