Можно ли сделать анимацию идеального круга, начиная с линии SVG?

Question

Можно ли создать анимацию идеального круга, начинающегося с линии SVG, который расширится от центра линии и станет кругом?

Я просматривал это, но этоне соответствует моим ожиданиям.Либо потому, что я использую неправильные ключевые слова, либо что-то еще.

У меня есть для моей строки:

<svg height="210" width="500">
  <line x1="150" y1="150" x2="50" y2="150" style="stroke:rgb(255,0,0); stroke-width:2" />
</svg>

… и процесс, который я ищу, будет таким:

Answer 1

Вы можете сделать это с чистым CSS:

.box {
  width:200px;
  height:4px;
  background:radial-gradient(circle,#000 99px,transparent 100px);
    
  animation:toCircle 5s linear 1s forwards;
}
@keyframes toCircle{
  to{
    height:200px;
  }
}


body {
  margin:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="box">

</div>

Answer 2

Вы можете элегантно преобразовать SVG-эллипс из линии в круг:

svg {
  background-color: #fff;
}

ellipse {
  background:radial-gradient(circle,#000 99px,transparent 100px);
  animation:toCircle 1s linear 1s forwards;
}

@keyframes toCircle{
  to {
    ry:50;
  }
}

<svg width="700" height="500">
	<ellipse cx="100" cy="100" rx="50" ry="0.1"/>
</svg>