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)

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.


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.