CODEWITHSUNDEEP
htmlcsssvg
BunchOfPaper
BunchOfPaper

Reputation: 7

is it possible to make an animation of a perfect circle beginning with an SVG line

Is it possible to make an animation of a perfect circle beginning with an SVG line, which will widen from the center of the line and become a circle?

I've been browsing about it, but it doesn't suit my expectations. Either because the keywords I use are wrong or something else.

I have this for my line: 

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

… and the process I'm looking for will be like this:

process steps

Upvotes: 0

Views: 123

Answers (2)

Michael Rovinsky
Michael Rovinsky

Reputation: 7220

You can elegantly transform an SVG ellipse from a line to a circle: 

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>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273990

You can do this with pure 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>

Upvotes: 2

Related Questions