3 ms·

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

Yup! Here's the base SVG I started with: https://p195.p4.n0.cdn.getcloudapp.com/items/OAuqBqvx/boat.svg?v=b7ea8350188628e6de9e5fe54388ded3 https://p195.p4.n0.cdn.getcloudapp.com/items/OAuqBqvx/boat.s... Everything else is just CSS!

renewiltord 6y ago
Very cool, indeed!
swyx 6y ago
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?version=3.24.1 https://svelte.dev/repl/7eea2eba3707414aa62c9ea53b92ad2d?ver... quick youtube discussion: https://www.youtube.com/watch?v=9wKnZNjdpp8&feature=youtu.be 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 https://news.ycombinator.com/item?id=24138573
- roboyoshi 6y ago
  thanks for the breakdown! Now we're all a little bit smarter.
- alickz 6y ago
  This is a great breakdown
- AnonHP 6y ago
  Nice breakdown, thank you. This had me in splits: >> “ Yup, had to get it out quick so I went simple!“ > “What the actual fuck?!”
  - swyx 6y ago
    i mean... am i wrong? lol thanks