How to make SVG Loop Animation?
Tags: svg, animation, 9vae
Published: 2020-10-29 01:33:16

---
title: How to make SVG Loop Animation?
published: true
description: 
tags: svg, animation, 9vae
//cover_image: https://direct_url_to_image.jpg
---

# How to make SVG Loop Animation?
Loop Animation is useful to make a bird flying or a man walking etc.

In this article I will explane how to make SVG Loop Animation without  using Java Script.

### SVG SMIL Animation
SVG stands for Scalable Vector Graphics. 
Many people think SVG is a vector-based static graphics  format. SVG  supports the animation which is called SMIL, Synchronized Multimedia Integration Language.
SMILE animation works in all browsers except in Internet Explorer and Opera Mini. You can see [ the compatibility table on Can I Use](http://caniuse.com/#feat=svg-smil).

### Simple  animation example

The following is an example of an orange circle that moves from left to right in front of the blue circle. 

![loop01a.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/7623d9bf-348b-2717-ade1-6a55a9901273.gif)

```
<svg>
  <circle fill="blue" cx="150" cy="100" r="50"  />
  <circle fill="orange" cy="100" r="20" >
    <animate attributeName="cx" from="50" to="250"
    dur="5s" repeatCount="indefinite" />
  </circle>
</svg>
```

* `<animate>` element  is used to animate `cx`. `cx` is the center position x of an orange circle.
* The  `cx` is moving `from="50" to="250"` during five seconds(`dur="5s"`).
* `repeatCount="indefinite"` means the animation will be  repeated indefinitely.


### Two circles moving around blue circle animation

In the next example, a new circle moving from right to left is added behind the blue circle.
You will see two circles are moving around the blue circle. 

![loop01b.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/6b8bb065-75b5-d704-c161-c828a6cc2233.gif)

```
<svg>
  <circle fill="orange" cy="100" r="20">
    <animate attributeName="cx" from="250" to="50"
    dur="5s"　repeatCount="indefinite" />
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cy="100" r="20">
    <animate attributeName="cx" from="50" to="250"
    dur="5s" repeatCount="indefinite" />
  </circle>
</svg>
```

### How to repeat one circle moving around blue circle?

It was easy to make the animation that two circles are moving around the blue circle. But if you want to make the animation that  one circle is moving around, you have to switch hide or display the circle alternately.  You can't use `repeatCount="indefinite"`.

You can switch hide or display circle by using ID as follows.

1. Add ID to the both circles such as `id="o1", id="o2"`.
2. Add `begin` to each circle and define the start time of the animation.
3. Set the start time to the end time of the other circle animation(`o1.end、o2.end`).

```
<svg>
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate id="o1" begin="0;o2.end"
    attributeName="cx" from="250" to="50" dur="5s" />
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate id="o2" begin="o1.end" 
    attributeName="cx" from="50" to="250" dur="5s" />
  </circle>
</svg>
```
![loop01c.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/3c1895ca-f67f-5e04-bb0a-443a55f7bcf1.gif)

The important point you have to think about is **Stacking order**.

* If the stacking order of the shapes doesn't change during the animation, you can use `repeatCount="indefinite"` to make loop animation.
* You can't use `repeatCount="indefinite"` if the stacking order will change during the animation.
You have to use ID. But it will be complicated when the number of shapes becomes larger. You have to define many IDs when you change the stacking order of the shapes.

### Loop animation using dummy loop and relative time
I recommend you to define dummy loop at first, and set each start time by using relative time from the dummy loop as follows.


```
<svg>
  <rect>
    <animate id="o1" begin="0;o1.end" dur="10s"
    attributeName="visibility" from="hide" to="hide"/>
  </rect>
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin" 
    attributeName="cx" from="250" to="50" dur="5.05s"/>
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin+5s" 
    attributeName="cx" from="50" to="250" dur="5.05s"/>
  </circle>
</svg>
```
* `<rect>` is a dummy object to define the  loop time 10 seconds (`dur="10s"`).
* `id="o1" begin="0;o1.end"` means the rect 'o1' will start  at 0 second and   restart again at the  end of animation. 
* `attributeName="visibility" from="hide" to="hide"` means the rect will be hidden everytime.
* The start time of the orange circle    is set relatively to `o1.begin` (as `begin="o1.begin"` and  `begin="o1.begin+5s"`).
* In order to avoid blink in browser, the animation time  is set to 5.05 seconds(`dur="5.05s"`). 


## Example of SVG Loop Animation

- The link on the left is an SVG animation (still image in IE). No matter how much you enlarge the screen, it will not be jagged.

|SVG|APNG|GIF|
|:--:|:--:|:--:|
|[01sharks](http://codepen.io/danjiro/full/LEbyxp)|![01sharks.eva.png](https://qiita-image-store.s3.amazonaws.com/0/67734/eec9a27c-089d-6475-a103-eb737a07007a.png)|![01sharks.eva.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/5b5e620e-6cf1-74a2-9014-52348e328ebc.gif)|
|[02ice](http://codepen.io/danjiro/full/YPpjqY)|![02ice.eva.png](https://qiita-image-store.s3.amazonaws.com/0/67734/8c1f0e9b-edb7-88a8-891a-467106425738.png)|![02ice.eva.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/4c1ce8c1-3b23-09aa-2cc6-831152144279.gif)|
|[03octopus](http://codepen.io/danjiro/full/yygGdP)|![03octopus.eva.png](https://qiita-image-store.s3.amazonaws.com/0/67734/d29b1cac-21bc-f7a6-e0c0-4b7e02fcbec0.png)|![03octopus.eva.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/57b6449e-5568-438c-7a74-16dd777794b3.gif)|
|[04torpede](http://codepen.io/danjiro/full/ogWwoL)|![04torpede.eva.png](https://qiita-image-store.s3.amazonaws.com/0/67734/c2cfde01-5ec2-9013-e62b-9e56863c4fe0.png)|![04torpede.eva.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/1ced3ad2-c305-9051-2861-e8fe73400123.gif)|
|[05crab](http://codepen.io/danjiro/full/MYoGWd)|![05crab.eva.png](https://qiita-image-store.s3.amazonaws.com/0/67734/c6dd73e4-49f1-bc43-6f56-795e46c583e3.png)|![05crab.eva.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/beb6d59b-60e8-b7f6-72f4-0af2d7680552.gif)|


### 2D Keyframe animation editor 9VAe
You can make SVG Loop Animation easily by using [Openclipart](https://openclipart.org/)  and free software 9VAe. 


|Download  (Click ![Untitled.png](https://qiita-image-store.s3.amazonaws.com/0/67734/dbea08ea-33e3-c9f2-aa04-73528cfa0f7f.png) in the following links)|Download from Other|How to Install|
|:--|:--|:--|
| [**9va-win (Windows)**](https://drive.google.com/file/d/0B_jLDEPlHKVjWVIzYWxCVUZwNWM/view?usp=sharing)|[9va-win (Softnic)](https://9vae-win.en.softonic.com/)|[windows](https://codepen.io/danjiro/post/9vae-download-and-install#windows-9va-win-1)|
| [**9va-mac64 (macOS 10.10-)**](https://drive.google.com/file/d/0B_jLDEPlHKVjUE0wWkh4THVsOFk/view?usp=sharing)<br>    [9va-mac (Old Ver.10.4-10.9 is here)](https://drive.google.com/file/d/1Hwkt8fisEcWuHkHcxQy3RfXWRHsypZmb/view?usp=sharing)|[9va-mac (Softnic)](https://9vae-mac.en.softonic.com/mac)|[mac](https://codepen.io/danjiro/post/9vae-download-and-install#macintoh-9va-mac-3)|
| [**9va-pi (Raspberry Pi)**](https://drive.google.com/file/d/0B_jLDEPlHKVjd0RPOFVWbWxwZkU/view?usp=sharing)|[9va-pi (Vector)](http://www.vector.co.jp/soft/other/other/se515318.html)|[pi](https://codepen.io/danjiro/post/9vae-download-and-install#raspberry-pi-9va-pi-5)|
| [**9va-pi (Ubuntu/Linux Mint/Xtra-PC (LinuxX86-32bit))**](https://drive.google.com/file/d/0B_jLDEPlHKVjTmU1M05GanZLWjg/view?usp=sharing)| |[linux](https://codepen.io/danjiro/post/9vae-download-and-install#ubuntu-linux-mint-xtra-pc-9va-pi-7)|
| [**PEAS motch! (Windows / Macintosh) Kids version)**](http://9vaelab.blogspot.jp/p/blog-page_12.html)| | |



|Smartphone|||
|:--|:--|:--|
|Android / Chromebook|[9VAe - Google Play](https://play.google.com/store/apps/details?id=com.qvae)|[How to make](https://9vaelab.blogspot.com/p/how-to-make-nim.html)|
|iPad|[9VAe](https://apps.apple.com/us/app/9vae/id1480969516)||
|iPhone|[9VAeDangla](https://apps.apple.com/us/app/9vaedangla/id1482450143)||
|Amazon Fire|[9VAe - Amazon](https://www.amazon.co.jp/dp/B082MYHTT7/ref=sr_1_1)||






See the following articles if you want more information .

* [9VAe Lab](https://9vaelab.blogspot.com/p/9vae.html)