Hacker News Reader

Comment by imagine99 | Hacker News Reader

Yes, they look really great and responsive, too. I'd actually like to know how they were done... Are they just basically coded by hand or is there a visual tool you can use to design interactive graphical stuff like this in what I guess is HTML5/CSS/maybe JavaScript, similar to (dare I mention the word) Flash in the olden days? (Sorry, haven't done any web development in decades, obviously :-)).

View on HN

Yup, they were coded by hand!

Here was the initial commit which added the first diagram (originally there was only one):

https://git.io/JfJ4K

a really cool way to explain RPKI, thanks for sharing!

Nitpick but the terms are useful: they are not responsive, they are interactive. Responsive (in modern front-end parlance) means they would adapt to different screen sizes. Some mainstream publications have been publishing responsive diagrams and I love it (here's an outstanding example: [1]). But this is not the case here.

[1]: https://graphics.reuters.com/CHINA-HEALTH-SOUTHKOREA-CLUSTER...

It's basically animating SVG with CSS, which is very neat. Not using js at all except to toggle some class names when you click the button.

It’s really just using CSS to animate regular HTML elements. SVG is used for the icons (the laptop, server, cloud), but the grid lines, connection lines, and packet animation are all just plain `<div/>`s :P

But you’re totally correct about the JS only toggling between path="happy" and path="sad"

Reply on news.ycombinator.com