# Animation
# Animate Order
Create animated SVG preview file and show it in browser. Helps to quickly evaluate line order for cutting processes. Only applies for the complete Inkscape document.
## Tips
- Do **not** use "-inkscape-stroke:hairline" attribute for your paths. It will not render. Your page might be blank!
- If multiple paths are animated simultaneously, break apart paths into sub paths. **Each sub path will start a new animation in parallel.**
- **start your browser indepently from Inkscape before running this extension**. Each call we open a new browser tab then. If your browser is closed initially, the Inkscape extension will call a new process window, but Inkscape is blocked until browser is closed again.
## Config / Troubleshooting
### Browser in path
Select your desired browser (must be installed and must exist in %PATH% variable). If this is not the case, configure it:
**Windows (Systemsteuerung\\Alle Systemsteuerungselemente\\System → Umgebungsvariablen)**
### Firefox adjustments
If SVG does not animate, check if file access is enabled
Visit **about:config** → set "**privacy.file\_unique\_origin**" to "**false**"
### Still no animation?
- break apart paths to sub paths
- Raise duration time to larger value
## More Info
- [https://github.com/maxwellito/vivus](https://github.com/maxwellito/vivus)
- [https://github.com/maxwellito/vivus-instant](https://github.com/maxwellito/vivus-instant)
- h[ttp://maxwellito.github.io/vivus](http://maxwellito.github.io/vivus/)
- [https://maxwellito.github.io/vivus-instan](https://maxwellito.github.io/vivus-instant/)t
See also [Line Animator](https://wiki.stadtfabrikanten.org/books/fablab-chemnitz/page/line-animator "Line Animator")
```
C:\Program Files\Mozilla Firefox\
```
## Convert animated SVG to Videos/GIFs
There are a lot of tools on the net but most do not work properly. Best is to use a screen capturing tool like [https://wiki.ubuntuusers.de/Kazam](https://wiki.ubuntuusers.de/Kazam/) to capture. This video can be converted to animated gif afterwards.
Install Kazam on Fedora:
```bash
sudo dnf install keybinder
sudo dnf install python3-xlib
wget https://raw.githubusercontent.com/rpmsphere/noarch/master/k/kazam-1.5.3-1.1.noarch.rpm
sudo rpm -Uvh kazam-1.5.3-1.1.noarch.rpm
```
Install Kazam on Ubuntu:
```bash
sudo apt install kazam
```
# Frame Animation Sequence
Source: [https://github.com/yttiktak/inkscape\_extension\_animate](https://github.com/yttiktak/inkscape_extension_animate)
Create svg path animation from frames: Place each frame of the animation in a layer named 'frame'. Each of these layers should have the same number of paths, and each path should have the same number of points as the corresponding path in other layers. The animation is applied to the paths in the first layer in the sequence, so the properties of that layer are used. Animations with different numbers of frames can be put into different sequences, named 'sequence', using sub-groups:
## Layers structure example
```ini
not_animated_layer1
sequence
frame
path1a
path2a
frame
path1b
path2b
frame
path1c
path2c
frame
path1d
path2d
sequence
frame
frame
frame
```
Use layer named exactly 'frame' and groups named exactly 'sequence', not, eg, frame1 frame2 frame3 !
## SVG Example
The svg:animate elements were created using this extension
```xml
```
Visual Output:
# Line Animator
Inkscape extension for animating paths, so it looks as if they were being drawn by hand, using CSS3 animations.
Source: [https://gitlab.com/Moini/ink\_line\_animator](https://gitlab.com/Moini/ink_line_animator)
[](https://wiki.stadtfabrikanten.org/uploads/images/gallery/2025-05/pZzzlom63CbdF8Pc-grafik.png) [](https://wiki.stadtfabrikanten.org/uploads/images/gallery/2025-05/Wfhj8YrxK2Tx246A-grafik.png) [](https://wiki.stadtfabrikanten.org/uploads/images/gallery/2025-05/euJzbP5VHTCQFVsU-grafik.png)
# Example
See also [Animate Order](https://wiki.stadtfabrikanten.org/books/fablab-chemnitz/page/animate-order "Animate Order")