2
$\begingroup$

I have a SVG with group of independent arcs that move around common origin. On user event those arcs can change both their radii and start/end angles. On other user event the user can change view from 2d to fake 3d (orthographic?) via following css transform, as described here:

translate(0px, ${t*5 - i*t*40}px)
rotateX(${t*60}deg)
rotateZ(${t*-30}deg)
scale(1.0)

t is a boolean flag telling if perspective view is on or off, if flag = 0 then no actual transformation is made.

My code that illustrate the example can be viewed here: https://codepen.io/stopyransky/pen/MZPbjg

Once you click button to trigger perspective view it changes correctly, but arc transitions (radii/angle) are now messed up.

My question is how to fix so the transitions of arcs will remain correct? I assume I need to modify the functions that change how arc is build in tweenAngles and tweenRadii but I have no clue what those transitions should be. I tried to reverse transitions when flag is 0 but it does not help.

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.