All examples By author By category About

christophermanning

Animated Civis Analytics Logo

Created by Christopher Manning

Summary

I created this to experiment with SVG rotate, chained transitions, and arc generated paths. I picked my company's logo since it has an interesting design and I had an idea of animating it.

My first attempt had me just using the d3.svg.arc() startAngle and endAngle to create the arcs, but that left the arcs with angled edges when they were rotated to line up. Instead, the arcs are full circles and white rectangles rotate around each arc to give the illusion that the arcs are rotating. This made the rotation easier since "rotating" the arcs only requires updating the rotate transform on the rects.

Controls

References

This is not affiliated with or endorsed by Civis Analytics.