What were the diagrams and animations created in?

[voltagex]

These are clear and great looking diagrams.

[luker983]

Thanks! Diagrams were made using https://www.diagrams.net/ and source files are located in the repo at /media. Inspiration was taken from Samy Kamkar's Slipstream diagrams at https://samy.pl/slipstream/

[luker983]

Update: Added some animations to the SVG diagrams using CSS after exporting from diagrams.net. Take a look at media/*.svg

Animated dashed lines:

<style type="text/css">
    .mxEdgeFlow {
        animation: mxEdgeFlow 0.5s linear;
        animation-iteration-count: infinite;
    }
    @keyframes mxEdgeFlow {
        to {
            stroke-dashoffset: -18;
        }
    }
</style>

Looping fade-in:

<style type="text/css">
    g {
        opacity: 0;
        animation-name: generic;
        animation-duration: 15s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
    }
    @keyframes generic {
        5%, 100% {opacity: 1}
    }    
    #step1 {
        animation-name: step;
    }
    @keyframes step {
        10% {opacity: 0}
        15%, 100% {opacity: 1}
    }
    ...
</style>