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

The illustrations are what draws attention and they are very nice and informative.

In context of parallel HN discussion¹ on merits of animated SVG, I consider it a loss for open standards that these animations are not made in SVG. If you try to inspect this page, the design and animation is hidden behind canvas and some (nicely written BTW) imperative javascript. It is hard to replicate, and hard to compose with other elements. The illustrations are completely white when disabling JS, which is less than ideal graceful degradation. Some people would argue that executing custom scripts should not be required to show animated graphics, even if it includes basic interactivity.

For comparison, visit this page² and try to 'inspect' animated graphics. Observe the SVG element in DOM and see how it changes when you scroll. Just by spending few minutes exploring you could probably recreate them, or at least reuse them somewhere else. We still don't see what's driving the animation (also JS), so that could still be improved using SMIL, but there is obvious benefit for using SVG here.

Don't take me wrong, it is really a nice article with very pleasant and clear animations. I'm merely speaking from perspective of open standards, and technology stack that provides good foundation for building complex illustrations. The author is not to blame here, as we lack decent tools for declarative graphics/animations.

¹ https://news.ycombinator.com/item?id=22297461 ² https://www.opencrux.com/



It's really funny you mentioned the other discussion because that's what I immediately thought when I looked at this page: that's a great use of SVG animations.

It's why I made this comment in response to a UX designer (many people on the thread seem to think that SVG animations are mainly for animating UX components): "There are whole worlds of use-cases outside the very restricted design paradigm you're describing."


> The author is not to blame here, as we lack decent tools for declarative graphics/animations.

Please show me the pure SMIL declaration for a pixel-exact replica of the example from the wonderful article: number and size of teeth on a spinning gear scales based on the horizontal position of a draggable slider.

On a related note: this wonderful article is an article. The next time an HN article about web complexity triggers another HTML Class of 4.01 Reunion, it would be great if admirers of this article would post the link and force them to reveal the true depths of their asceticism.

I think I win either way. If there really is an SMIL solution then then the 4.01 grumps would be forced to backport declarative graphics/animation into their nostalgia. If not, then my point stands.


Can you explain what is it that you win? Because the current state where it takes a talented programmer + mathematician + designer to create this kind of content is loss for everyone.

No, SMIL on its own cannot replicate these illustrations. I hope that some future standard for declarative reactive graphics will be able to.


I personally disagree with people who disable JS and expect the web to continue working as expected, but one of the other downsides of using Canvas for such animations is that there is no good way of exposing that animation to screen readers. Some projects get around this by having an accessibility layer in DOM that overlays the Canvas which renders the actual animations (e.g. https://proxx.app/), but I imagine that a11y animated SVGs would be a better approach here (if they were easier to create).


> I personally disagree with people who disable JS and expect the web to continue working as expected

In a general sense, I agree with you.

But pages that are generally static, like a blog or news article, should still work.

I think it's completely reasonable that the animations in the linked article break with JS disabled. Could they have been done differently and had graceful degradation? Yeah, I suppose. But I think it's fine as-is.


It's easy to lose track of in the face of scene graph vector formats like svg but you have to remember canvas + javascript can be thought of as a procedural cad system, that is, the epitome of drawing tools.

The svg is a static weak alternative to true procedural generation.

For reference the postscript language is the same way. hand written procedural postscript is an amazing drawing tool.




Consider applying for YC's Winter 2026 batch! Applications are open till Nov 10

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

Search: