[Safari 10 issue with rotate SVG circle]

Hi there,

 

While trying to animation multiple SVG circle I found that interesting bug where if I rotate one of my circle (circle2) to the value -90 it seems to go back at to rotate back to 0deg at the end of my animation.

 

Fun fact, if you replace the value -90deg by -90.06deg it doesn't seems to bug, I would guess there is some rounding involve, it jumps to -91deg.

 

This bug seems to occur only on Safari 10.0.1

Even if I found a temporary fix for my problem I'm still curious on what could be done differently to avoid that bug 

 

See the Pen eBMqwJ by suparjam (@suparjam) on CodePen

[Animating css wrap-around border]

Hey guys great solution !

 

I was wondering how to obtain a similar result with

.square {

  border-radius: 100%;

  ...

}

 

I've tried to make it work with 4 span but can seems to find a clean solution for it