-1

I need to transform a rectangle to a circle. for that I used clip-path: circle() and it kinda works, but it crops sides of figure when animating. I understand why it acts like that, cause it's a rectangle, not a square. but is there any way to smoothly do such animation, so that the sides of the figure are not cut off at a certain point of the animation?

shadyws
  • 1
  • 1
  • use clip-path: circle(72%) and you have your rectangle again. Related: https://stackoverflow.com/a/59779276/8620333 – Temani Afif Aug 25 '23 at 14:22
  • I would understand a transformation to perhaps preserve the area of the rectangle. But are you just wanting the smaller of the rectangles height/width to define the diameter of the circle? – A Haworth Aug 25 '23 at 20:25

1 Answers1

0

border-radius.

.rectangle {
    width: 300px;
    height: 100px;
    background: red;
}

.rounded {
  border-radius: 40%;
}
<div class="rectangle"></div>
<div class="rectangle rounded"></div>
twalow
  • 405
  • 3
  • 6