CODEWITHSUNDEEP
cssanimationsvg
Interactive
Interactive

Reputation: 1550

SVG animate from circle to line

I want to shape a circle to a line (path).
Is this possible?

Maybe it's the way I Google that might be the problem.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28">
  <title>circle</title>
  <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
</svg>

The best way (for me) would be if the top and bottom come together.
But I'm more interested on how to do this! I couldn't find anything on how to shape the svg element

--------- SMALL UPDATE ----------
Just found this. It might help me get a direction.

--------- SMALL UPDATE ----------
So I tried to do this without JQuery but I think it won't work. The reason for thsi is because my JQuery sucks.... Can anybody help me out with some JQuery fix?

Upvotes: 0

Views: 1358

Answers (2)

Interactive
Interactive

Reputation: 1550

Sometimes in life you shouldn't overthink everything.
The answer was really simple but I just thought to hard.

A simple scale() did the trick.

.container{
  width: 100px;
  height: 100px;
  margin: 0 auto;
}	
	
@keyframes shapeshifter {
	0% {
		transform: scale(1,1);
		transform-origin: 50% 50%;
	} 	
	100% {
		transform: scale(1,0.01);
		transform-origin: 50% 50%;
	}	
}
.shape{ 
	animation: shapeshifter 1s ease-in-out 1 both;
}
<div class="container">
	<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <title>circle</title>
  <circle class="shape" cx="50.109" cy="50.086" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
</svg>
</div>

Upvotes: 1

Banzay
Banzay

Reputation: 9470

You can use animateTransform methods for vertical scale to transform a circle to a line and for translate-Y to hold transformation origin in the center of circle

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28">
  <title>circle</title>
  <g>
  <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10">
    <animateTransform attributeName="transform"
    type="scale"
    from="1 1"
    to="1 0"
    begin="0s"
    dur="2s"
    repeatCount="indefinite"
  />
  </circle>
 <animateTransform attributeName="transform"
    type="translate"
    from="0 0"
    to="0 24"
    begin="0s"
    dur="2s"
    repeatCount="indefinite"
  />
  </g>
</svg>

Upvotes: 2

Related Questions