Jump to content
Search Community

SVG animation to mimic CSS border radius

suresh_vs test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

1 hour ago, suresh_vs said:

@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

 

That's not really a hack. That would be the way to actually mimic the movement you are after because you will need two points to move away from the starting corner in order for the motion to be the same.

 

Another alternative is to have a circle with four point and push the 'curve handles' so far away that they make it look like it is a square. I would recommend @Sahil's suggestion as it will give you more control - for example, it would make it easier to have a rectangle instead of a box.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...