Monorail – Turn CSS animations into interactive SVG graphs

121 points by stanko 5 days ago | 9 comments
  • stanko 5 days ago
    Hey HN,

    I needed a few simple graphs for a blog post [0]. Instead of slapping together a few SVGs and moving on, I decided to write a whole library to parse CSS keyframe animations and convert them to interactive graphs.

    It ended up being a rabbit hole, with a lot of caveats. But it was fun to make, and I'm really happy with the graphs it produces.

    I'm not sure how useful it will be for others. If you end up using it, I'd love to see how - feel free to reach out.

    It's open source [1] under the MIT license. Written in TypeScript with no dependencies.

    Let me know what you think!

    [0] https://muffinman.io/blog/css-image-glitch/

    [1] https://github.com/Stanko/monorail

    • efskap 2 days ago
      Cool stuff! Flattening things like colours into a 1D value is an interesting challenge here. How did you decide to weigh the R channel an order of magnitude higher than G and so on? I might've tried working with HSV for instance, since it feels like animations would often be along one of those axes, but maybe not.
      • stanko 2 days ago
        Thank you! As for color conversion, I didn’t spend too much time thinking about the conversion. Because I’m using canvas to transform CSS colors to RGBA, I just went and multiplied them in order by powers on 10.

        It can definitely be improved. Using HSL or even OKLch would probably give nicer results. I may look into it.

        • didgeoridoo 2 days ago
          Is that what’s happening with the color? I assumed it was doing (R+G+B)•Opacity, so the max would be 255•3=765 and the min would be 0.
      • deivid 2 days ago
        Interesting! I had the opposite idea: to convert arbitrary SVG to CSS..
        • stanko 2 days ago
          What do you have in mind?

          I thought about making all values on the chart draggable. It would then update the CSS animation in realtime. I think would be very cool, but I’m not sure if there is a real usage for something like that, so I haven’t touched it.

      • austinallegro 2 days ago
        "I've sold monorails to Brockway, Ogdenville, and North Haverbrook, and by gum it put them on the map!"
        • pvo50555 23 hours ago
          shows map with only those cities labelled
        • QAkICoU7IDNkpFu 2 days ago
          [dead]