Hacker News Reader

Hacker News

Comment by arunc | Hacker News Reader

Parent Full thread

arunc

Curious how the image below was created. Looks pretty neat.

https://fasterthanli.me/content/series/making-our-own-execut...

View on HN

Just good ol' draw.io desktop app: https://github.com/jgraph/drawio-desktop

Comments below already figured out the rotate-hue trick :)

Styling inside the SVG is possible... if the SVG is inline, and not in an `<img>` tag. Also, it would be really hard to target which elements to style, as draw.io does not really give you classes for each color family.

Oh also, I have a whole .drawio => .pdf => .svg => optimized .svg pipeline so you can just save the .svg and not worry about having the fonts. (But also the svg no longer contains the text itself — it's a trade-off).

Thanks! Isn't it a lot of effort to draw by hand? Genuine question, as I'm interested to know if there's an easy to write text format that will get converted to such a neat looking image :)

It definitely takes up a good chunk of time, but it's worth it! It's not that bad once you learn the keyboard shortcuts.

I thought about going the "declarative / adhoc tool" way but I make lots of different diagram types, so I would probably spend forever bikeshedding it instead of writing the actual article.

What’s really neat is that when you switch to dark mode in the bottom left corner, the image flips to dark mode too!

That's a "feature" of SVGs. The image is an SVG and since they are transparent it goes dark when switching.

It’s not just that the image is transparent though, because the color of the text changes too. I thought perhaps it’s using the site CSS to style SVG elements (which appears to be possible, though I haven’t tried it), but it turns out it’s just a CSS filter `invert(83%) hue-rotate(180deg)`. Still, it looks great and I’m impressed by the attention to detail.

Ah, serves me right for not seeing it myself and assuming it was just the background. Thanks for the additional info.

Okay, this is driving me crazy. Where?

Bottom-left of the article linked in the OP, not the linked SVG image itself.

It's a very low-contrast sun in the bottom left corner.

Agreed, and it's also a vector image which can be zoomed back and forth without any loss of details. I'm not sure what software might have created it, but ploticus' multi column legends seem somewhat similar. http://ploticus.sourceforge.net/doc/welcome.html

Also worth checking is GLE. https://glx.sourceforge.io/index.html

Reply on news.ycombinator.com