Is there a way to expand a circle from its middle point to both left and right?

Question

I want to create this effect in which a circle will expand to left and right simultaneously. I've seen in this answer from another post: https://stackoverflow.com/a/29922969

this is the code reproduced in their answer:

.logo {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: red;
  transition: width 2s;
}
.logo:hover {
  width: 300px;
}

<div class="logo"></div>

and this is the exact effect I want, except it should expand from center instead of left to right.

I tried it with the help of AI, but even it couldn't make it and recreated the same effect from the provided answer but not from center to left and right.

Answer 1

Just center the div.

.logo {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: red;
  transition: width 2s;
  margin: auto;
}

.logo:hover {
  width: 300px;
}

<div class="logo"></div>