CSS only "coding" animation

I promised, I delivered (eventually). I shared my SVG coding loading animation a month or two ago on reddit's /r/webdev, and it went down fairly well. In my original post about how I built that animation, I talk about how support for SVG animations is being deprecated in many browsers and that I really should have built it with CSS only animations. Well, here it is :)

By the way, if you like this and want to learn how to do it yourself (it's actually easy), check out the tutorial here ;)

That's a GIF, but check out the GitHub repo for the CSS only loader, it loops forever!

Updates

I've made a few changes to the animation this time, I didn't just copy the original design. The most noticable change is that I picked colours based on Sublime text's Monokai colour theme. For me, those colours are coding, since I've used Sublime for years. Yes I've tried others, I always come back to Sublime, I think I'm getting old and stuck in my ways at the grand old age of 30.

Another change I've made is that the lines start to "code" a little earlier now, making it a bit more "flowy", as if a computer is generating the code as opposed to someone typing it.

Possible improvements to make

I think I'd like the option to resize it. At the moment the widths are fixed in pixel values. Ideally this would be a dynamic element that can just drop in anywhere and work. As it stands, that's not really the case, but this project/distraction was largely academic anyway, so it's fine.