Circuit Animation (SVG + CSS)

For our Robotics Nanodegree launch, one of our product designers @Fritz and I explored the idea of animating a circuit for the background of our landing page. A dozen+ iterations later, we created this pulsing animation. It's a nice subtle effect on the background of the page.

After some research, we decided on attempting to create the animation purely using CSS. This was achieved by animating the stroke of the polylines within the SVG.

We started with one tile of the SVG, which eventually expanded into a giant circuit, and then chose specific groups of circuit lines to animate. When we were happy with the animation, the image was optimized (SVGO) and then the CSS was added inline within the SVG code. Then to achieve the entire effect, we layered two background-images on top of each other (the repeating gray circuit bg, and the animating SVG).

You can see some of the progression through our codepens:
Prototype #4: http://codepen.io/jenniesyip/pen/dvPvMB
Prototype #5: http://codepen.io/jenniesyip/pen/xqVLzP
Prototype #9: http://codepen.io/jenniesyip/pen/GWqJyR
Prototype #10: http://codepen.io/jenniesyip/pen/WpxQKy

( The featured image is a screen recording of the actual SVG animation, which we converted into a GIF )

Visit our Robotics Nanodegree lander:
https://www.udacity.com/robotics

This result was a great success due to our developer and designer collaboration! :) Cheers! Happy animating!