Fibonacci's series is a recurrence relation where by Value_n = Value_n-1 + Value_n-2. Each iteration generates a square (<rect> element) with hieght & width of Value_n, plus a curve (<path> element) with radius Value_n.

Wrapping each iteration's <rect> and <path> in a <g>roup allows us to rotate both elements at the same time. This might normally be done in CSS, but IE10 doesn't obey so a different technique was used: adding inline SVG transform attributes as each <g>roup is created in the directive's link function

Because we're rotating with each iteration, <g>roup X and Y starting coordinates are relatively easy to calculate. X_n and Y_n depend on attributes of their siblings:
X_n = +( Y_n-1 )
Y_n = -( Width_n-2 + Y_n-2 )