SVG animate from circle to line

Question

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?

score 2 · Answer 1 · edited Feb 02 '17 at 10:11

2

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>

edited Feb 02 '17 at 10:11

Robert Longson

118,664
26
252
242

answered Feb 02 '17 at 09:57

Banzay

9,310
2
27
46

Oh wow this is awesome. I'll read up on ``. Didn't know about that one. Thnx mate. – Interactive Feb 02 '17 at 10:02
be aware that animateTransform is depricated and will be removed from browsers. this solution is not future prove :-( http://stackoverflow.com/questions/30965580/deprecated-smil-svg-animation-replaced-with-css-or-web-animations-effects-hover – Holger Will Feb 02 '17 at 10:45
Thnx. That sucks. So here's a no go – Interactive Feb 02 '17 at 10:47

score 1 · Answer 2 · answered Feb 02 '17 at 13:24

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>

SVG animate from circle to line

2 Answers2