I created a logo for my consulting website. When I started I originally figured I'd have a small, loosely connected force-directed graph bouncing across the screen as it would represent the work that I did on my masters project. Rather than invent this from scratch I went to my usual source of inspiration: Mike Bostock's d3 examples.

However, I found the Circle Wave and knew I needed to do something with it. I've used 100s of CPU hours graphing sin waves so this seemed just as fitting to use.

The animation I finally landed on isn't too far from the original. I played with the amplitude and timing a bit, plus changed the color mixing in order to work with the black background. d3 animation

But. This is a cpu hog and that's too bad because it shouldn't be. It's the same 400 frames over and over again so an animated gif should be just as good. I installed LICEcap and recorded a few loops of the logo and saved the gif. Then I separated each frame into separate images using ImageMagick, found one complete period, deleted the appropriate images, and then used ImageMagick to create a new animated gif.

JHI Systems log

It's not quite as cool as having it all done dynamically with javascript but it sure saves a lot of cpu grinding.

Also, I considered doing this 100% in javascript, saving each frame as a file using node, but, the way I did this seemed like it might be easier and I'm pleased with the results.