Search code examples
svgsvg-animate

Animate SVG circle from small to large and back to small

Without using css and js, I would like to animate this svg. I would like for the circles to go from small to large and then back to small. I've gotten the animation to work for small to large but now I can't seem to figure out how to get them to return to their original size.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="6" cy="8" r="1" style="fill:steelblue;">
    <animate attributeType="XML" attributeName="r" from="1" to="6"
          dur="1s" begin=".25s" repeatCount="indefinite" />
  </circle>
  <circle cx="18" cy="8" r="1" style="fill:red;">
    <animate attributeType="XML" attributeName="r" from="1" to="6"
            dur="1s" begin=".5s" repeatCount="indefinite" />
  </circle>
  <circle cx="30" cy="8" r="1" style="fill:orange;">
    <animate attributeType="XML" attributeName="r" from="1" to="6"
            dur="1s" begin=".75s" repeatCount="indefinite" />
  </circle>
  <circle cx="42" cy="8" r="1" style="fill:green;">
    <animate attributeType="XML" attributeName="r" from="1" to="6"
            dur="1s" begin="1s" repeatCount="indefinite" />
  </circle>
</svg>

Focusing on the 1st circle, I'd like to go from r="1" to r="6" and then back to r="1". This should happen within dur="1s".

Is this possible? If so how? Again, without using external JS or CSS.

Thanks!

Solution

  • Instead of from and to, use values to list a series of values that it should animate between.

    <svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="6" cy="8" r="1" style="fill:steelblue;">
    <animate attributeType="XML" attributeName="r" values="1;6;1"
             dur="1s" begin="0.25s" repeatCount="indefinite" />
  </circle>
  <circle cx="18" cy="8" r="1" style="fill:red;">
    <animate attributeType="XML" attributeName="r" values="1;6;1"
            dur="1s" begin="0.5s" repeatCount="indefinite" />
  </circle>
  <circle cx="30" cy="8" r="1" style="fill:orange;">
    <animate attributeType="XML" attributeName="r" values="1;6;1"
            dur="1s" begin="0.75s" repeatCount="indefinite" />
  </circle>
  <circle cx="42" cy="8" r="1" style="fill:green;">
    <animate attributeType="XML" attributeName="r" values="1;6;1"
            dur="1s" begin="1s" repeatCount="indefinite" />
  </circle>
</svg>