The yin-yang symbol (called taijitu) looked to me like a snapshot of a system in motion. A moment where everything is suspended in perfect balance. But also a pause before an imminent change, where this balance is lost and then restored, over and over again.
Having learned how to create animations in D3.js thanks to tutorials like Jerome Cukier‘s Creating Animations and Transitions With D3 and examples like Roland Dunn‘s attrTween in a Transition to Move an Element Using a Function I decided to give this idea a try. I quickly realized that I also needed a better understanding of the SVG coordinate system and how it is affected by nested transformations. To that end Sara Soueidan‘s tutorial on SVG transformations was invaluable.
This experiment breaks down the taijitu into components, represented as SVG circles and arcs. The initial angle of each component is calculated and used as the starting point of an animated transition coverting a full cycle. At each step, the circles are scaled, translated to compensate for the change in position introduced by the scaling, and then rotated using a polar to cartesian transformation.
Every aspect of the animation is parameterized. In a future version I might look into adding a simple control panel to expose the parameters for experimentation. That will likely require a change on how the continous animation is achieved, replacing the “recursive” callback call made by transition.end() with d3.timer().
Update: Check out the latest, customizable version at ObservableHQ