Skip to content

Instantly share code, notes, and snippets.

@nascif
nascif / .block
Last active February 20, 2017 21:15
Valentine
license: mit
@nascif
nascif / README.md
Last active April 14, 2019 00:49
Yin-Yang animation using D3.js

Yin-Yang Animation

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](http://sarasoueidan