7 ms·

Curious how the image below was created. Looks pretty neat. https://fasterthanli.me/content/series/making-our-own-executable-packer/part-1/assets/elf64-file-he

by arunc 6y ago

Curious how the image below was created. Looks pretty neat. https://fasterthanli.me/content/series/making-our-own-executable-packer/part-1/assets/elf64-file-header.7ee277618b2ed27a.svg https://fasterthanli.me/content/series/making-our-own-execut...

squarefoot 6y ago
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 http://ploticus.sourceforge.net/doc/welcome.html Also worth checking is GLE. https://glx.sourceforge.io/index.html https://glx.sourceforge.io/index.html
mfsch 6y ago
What’s really neat is that when you switch to dark mode in the bottom left corner, the image flips to dark mode too!
- Tokelin 6y ago
  That's a "feature" of SVGs. The image is an SVG and since they are transparent it goes dark when switching.
  - mfsch 6y ago
    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.
    - Tokelin 6y ago
      Ah, serves me right for not seeing it myself and assuming it was just the background. Thanks for the additional info.
- BRedSox 6y ago
  Okay, this is driving me crazy. Where?
  - coldpie 6y ago
    Bottom-left of the article linked in the OP, not the linked SVG image itself.
  - lights0123 6y ago
    It's a very low-contrast sun in the bottom left corner.
fasterthanlime 6y ago
Just good ol' draw.io desktop app: https://github.com/jgraph/drawio-desktop 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).
- arunc 6y ago
  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 :)
  - fasterthanlime 6y ago
    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.

by arunc 6y ago

squarefoot 6y ago

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 http://ploticus.sourceforge.net/doc/welcome.html Also worth checking is GLE. https://glx.sourceforge.io/index.html https://glx.sourceforge.io/index.html

mfsch 6y ago

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

Tokelin 6y ago
That's a "feature" of SVGs. The image is an SVG and since they are transparent it goes dark when switching.
- mfsch 6y ago
  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.
  - Tokelin 6y ago
    Ah, serves me right for not seeing it myself and assuming it was just the background. Thanks for the additional info.
BRedSox 6y ago
Okay, this is driving me crazy. Where?
- coldpie 6y ago
  Bottom-left of the article linked in the OP, not the linked SVG image itself.
- lights0123 6y ago
  It's a very low-contrast sun in the bottom left corner.

fasterthanlime 6y ago

Just good ol' draw.io desktop app: https://github.com/jgraph/drawio-desktop 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).

arunc 6y ago
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 :)
- fasterthanlime 6y ago
  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.