suresh_vs

@PointC Cool! I didn't know SVG had border radius properties too :). Love all the solutions here. Thank you!

Haha.. it's all good ?

Apologies for the terminology. When I said 'hack', I meant "what an interesting way to exploit the property". I've tried it with some users and it seems unnoticeable enough. I think I can proceed with this method.

@mikel, thanks for the links. I'm still processing all that info in that thread. I'll try those out @Sahil, hey that's an interesting hack :D. I wonder if my users will notice. Let me try this on some users and see the result

Thanks for the reply, Mikel! I had tried rotating the circle by 45 degrees, but I couldn't get the effect you've shown here. How did you generate the rotated square? I noticed your SVG path looks very different from the ones I posted. I generated mine in Sketch. Anyway, the first scenario definitely looks a lot better in your pen. I'd love to do this for the second scenario too.

I’m experimenting with the MorphSVG plugin and am trying to do a simple “square box to square with border radius” style animation. Here's a pen of what I’m trying to do. - the left green squares are div based animation. This is the effect I want - the right red squares are SVG based animation. In the SVG animation, it almost feels like there is a slight rotation happening. Is there any way to get the SVG animation similar to the CSS border radius animation? (BTW, I want to specifically make this work in SVG. This is just an example scenario from a much larger tool that I’m working on)