[SVG animation to mimic CSS border radius]

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

[SVG animation to mimic CSS border radius]

Haha.. it's all good ?

[SVG animation to mimic CSS border radius]

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.

[SVG animation to mimic CSS border radius]

@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

[SVG animation to mimic CSS border radius]

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.

[SVG animation to mimic CSS border radius]

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.

See the Pen ddbByO by sureshvselvaraj (@sureshvselvaraj) on CodePen

- 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)