Stroked Yin-Yang

by AdamStanislav - uploaded on June 11, 2016, 3:34 am

The entire graphic is drawn as a single path filled with light gray (or any other color you change the value of “fill” in line 4) and stroked with black. The other half, usually shown in white is created here as a hole in the path. That means it is completely transparent, and has whatever color its background has. To achieve this, not just with SVG but with other vector formats, any black portion of the path is drawn counterclockwise, any “white” portion clockwise. Stroking the paths shows how exactly a one-piece graphic is constructed. Fonts generally require the designers to use the all-one-piece-with-no-overlap method.



Also, this graphic is taking advantage of the kappa constant described in my e-book Bézier Circles and other shapes, freely downloadable from www.smashwords.com/books/view/483578 (kappa = 4 * (sqrt(2) - 1) / 3).