5 ms·

Highly recommend svg for animations too. Totally JS-free, self-contained files, supported by all browsers but Microsoft (can just show static svg)... Once you g

Highly recommend svg for animations too. Totally JS-free, self-contained files, supported by all browsers but Microsoft (can just show static svg)... Once you get the hang of the syntax and svg layout, animating is pretty straightforward. Here's a fun 404 page I made that shows just how extensive an animation you can accomplish (let it play for > 1 minute) - https://app.astronomer.io/404 https://app.astronomer.io/404 (You can open the image in a new tab and take a look at the svg code (it's --pretty printed)

deergomoo 8y ago
The problem with SVG animation is it seems to be abnormally resource intensive. I noticed it on a project I worked on recently -- simply pulsing a few <circle>s larger and smaller pegged a CPU core at a constant 40% on my work machine. Indeed, opening your (very cool) 404 page shows a constant 30% CPU usage. Fine for a 404 page which people are unlikely to stick around on, not fine for a screen that someone is going to spend a significant amount of time on.
- Izkata 8y ago
  My Firefox jumps from about 6% to 10% on that page... Noticeable, but not nearly as bad as you're seeing.
  - tigershark 8y ago
    How many cores do you have? If you have 8 it is scarily close to 100% for a single core.
- dasyatidprime 8y ago
  What browser/OS/hardware configuration is this? I have never observed such an effect before.
- pcwalton 8y ago
  I'm working on speeding this up via the Pathfinder project, for Firefox. :)
  - tribby 8y ago
    awesome - I enjoyed reading up on your work! stuff like this makes me wonder if variable fonts will become a popular method for animating certain things on the web (maybe in the context of UI kits like font awesome, ionicons, etc). it still kind of blows my mind how quickly we all moved to abandon adobe flash once HTML became viable. I'm not a fan of the attack surface that flash presents, but in retrospect, especially thinking about the hardware I was using 15 years ago, it almost seems like advanced alien technology when contrasted with the state of vector animation on the web today.
  - polskibus 8y ago
    Do you know by any chance if support for new SVG standard will ever land?
cseelus 8y ago
That is indeed inspiring. Running very smoothly even on an old iPhone I tested it with. I will implement something using animated SVG for the 404 and 500 error pages of our webapp.
bfred_it 8y ago
Don’t do it. Not worth it. Once you get into transforms it’s a waste of time. Anything more complex than a couple `animate` elements and you’re better off with a mini JavaScript lib. I used to spend time on this but when a little animation takes two hours then you stop.
- pcmaffey 8y ago
  It's not so bad once you figure to create a new <g> tag for every animation. But yeah, there's a lot of trial and error to it (as with any design work)... unless you want to really mentally nail down the coordinate system.
progval 8y ago
The image is downloaded by JS code (via astronomer.io's API) :|
- pcmaffey 8y ago
  Well yeah it's a react app... here's a link to the raw svg file on our cdn - https://cdn.astronomer.io/app/img/astronaut.svg https://cdn.astronomer.io/app/img/astronaut.svg
antibland 8y ago
Beautiful, but it took a long time (~7 seconds) to paint when viewing it in Brave on an Android Pixel. I'm on a 4g connection. This is a lot to ask of users, for a page that ultimately tells you there's nothing to look at. I haven't experimented with skeleton loading placeholders for SVG heavy presentations, but it may be suitable here.
- pcmaffey 8y ago
  Interesting, will have to look into that... the file itself is only 27kb. So a normal placeholder while it downloads wouldn't do much. I'm not sure if there's a way to set a loading placeholder while the svg paints? ie is there an event for when it's finished painting?
  - Hello71 8y ago
    it's because you load a huge 2.4 MB JS file, and your web server is configured terribly so gzip is off so it really is 2.4 MB.
    - tomsmeding 8y ago
      If that's true, then pity the mobile users on a capped data plan.
    - aplummer 8y ago
      There are a lot nicer ways to say that FYI
- deleted 8y ago
  [deleted]
ComputerGuru 8y ago
Nice animation! Thanks for the Easter egg hint. Loaded immediately on Safari/iPhone 8+ and was butter smooth.
sethrin 8y ago
What tool did you use to author the SVG file? And presumably you optimized it as well?
- pcmaffey 8y ago
  Inkscape for graphics. Text editor for animations. svgo to optimize.
aplummer 8y ago
Loved the finale
aplummer 8y ago
Have a look at bodymovin / Lottie, I appreciate the handmade approach but might save you a bunch of time
kyle-rb 8y ago
Nice! I made an SVG animation myself, but I used embedded CSS animations instead of SMIL: http://nin.ten.dog/img/shibe.svg http://nin.ten.dog/img/shibe.svg

deergomoo 8y ago

The problem with SVG animation is it seems to be abnormally resource intensive. I noticed it on a project I worked on recently -- simply pulsing a few <circle>s larger and smaller pegged a CPU core at a constant 40% on my work machine. Indeed, opening your (very cool) 404 page shows a constant 30% CPU usage. Fine for a 404 page which people are unlikely to stick around on, not fine for a screen that someone is going to spend a significant amount of time on.

Izkata 8y ago
My Firefox jumps from about 6% to 10% on that page... Noticeable, but not nearly as bad as you're seeing.
- tigershark 8y ago
  How many cores do you have? If you have 8 it is scarily close to 100% for a single core.
dasyatidprime 8y ago
What browser/OS/hardware configuration is this? I have never observed such an effect before.
pcwalton 8y ago
I'm working on speeding this up via the Pathfinder project, for Firefox. :)
- tribby 8y ago
  awesome - I enjoyed reading up on your work! stuff like this makes me wonder if variable fonts will become a popular method for animating certain things on the web (maybe in the context of UI kits like font awesome, ionicons, etc). it still kind of blows my mind how quickly we all moved to abandon adobe flash once HTML became viable. I'm not a fan of the attack surface that flash presents, but in retrospect, especially thinking about the hardware I was using 15 years ago, it almost seems like advanced alien technology when contrasted with the state of vector animation on the web today.
- polskibus 8y ago
  Do you know by any chance if support for new SVG standard will ever land?

cseelus 8y ago

That is indeed inspiring. Running very smoothly even on an old iPhone I tested it with. I will implement something using animated SVG for the 404 and 500 error pages of our webapp.

bfred_it 8y ago

Don’t do it. Not worth it. Once you get into transforms it’s a waste of time. Anything more complex than a couple `animate` elements and you’re better off with a mini JavaScript lib. I used to spend time on this but when a little animation takes two hours then you stop.

pcmaffey 8y ago
It's not so bad once you figure to create a new <g> tag for every animation. But yeah, there's a lot of trial and error to it (as with any design work)... unless you want to really mentally nail down the coordinate system.

progval 8y ago

The image is downloaded by JS code (via astronomer.io's API) :|

pcmaffey 8y ago
Well yeah it's a react app... here's a link to the raw svg file on our cdn - https://cdn.astronomer.io/app/img/astronaut.svg https://cdn.astronomer.io/app/img/astronaut.svg

antibland 8y ago

Beautiful, but it took a long time (~7 seconds) to paint when viewing it in Brave on an Android Pixel. I'm on a 4g connection. This is a lot to ask of users, for a page that ultimately tells you there's nothing to look at. I haven't experimented with skeleton loading placeholders for SVG heavy presentations, but it may be suitable here.

pcmaffey 8y ago
Interesting, will have to look into that... the file itself is only 27kb. So a normal placeholder while it downloads wouldn't do much. I'm not sure if there's a way to set a loading placeholder while the svg paints? ie is there an event for when it's finished painting?
- Hello71 8y ago
  it's because you load a huge 2.4 MB JS file, and your web server is configured terribly so gzip is off so it really is 2.4 MB.
  - tomsmeding 8y ago
    If that's true, then pity the mobile users on a capped data plan.
  - aplummer 8y ago
    There are a lot nicer ways to say that FYI
deleted 8y ago
[deleted]

ComputerGuru 8y ago

Nice animation! Thanks for the Easter egg hint. Loaded immediately on Safari/iPhone 8+ and was butter smooth.

sethrin 8y ago

What tool did you use to author the SVG file? And presumably you optimized it as well?

pcmaffey 8y ago
Inkscape for graphics. Text editor for animations. svgo to optimize.

aplummer 8y ago

Loved the finale

aplummer 8y ago

Have a look at bodymovin / Lottie, I appreciate the handmade approach but might save you a bunch of time

kyle-rb 8y ago

Nice! I made an SVG animation myself, but I used embedded CSS animations instead of SMIL: http://nin.ten.dog/img/shibe.svg http://nin.ten.dog/img/shibe.svg