Animating a fish in Inkscape with scaling and skewing

Inkscape Tutorial

This is a quick reply to a request for animating a fish. Let me start by stating the obvious: Inkscape is not made for animation. However, it is great for creating the bits and pieces for animations. A while back, I recorded a video on animating a fly’s wing in Inkscape.  Now, the question was: Could the same style of animation work for a fish? Well… I tired and it can be done and look rather decent. 

Note:

For animations like this, I like to go with bone-based animation tools [Spine, Spriter, DragonBones (free), to name a few]. Create different parts in Inkscape and using the flexibility and ease of vectors. Export them as separate PNG files. Animate in dedicated software.

Let’s get started

As usual, I prefer to use standard shapes to create elements. The pen tool works nicely. In my opinion, circles and rectangles get the job done easier and faster a lot of the time. When creating separate elements, this approach seems even more favorable.

2Dgameartguru - inkscape toolbar
2Dgameartguru - animating a fish in inkscape

Create the base shape from a circle, convert to a path, and drag the two outer nodes outwards.

Duplicate the base shape a few times [shaded base, lighter belly, coloured top] and use a clip to keep it all inside the base shape.

Highlight and details

Add a crescent shape as the highlight on the top. Another shape as a gill and some detail to make it look a little more interesting. Depending on the size of the fish in the game you can also add some scales.

2Dgameartguru - animating a fish in inkscape
2Dgameartguru - animating a fish in inkscape

Another circle is the start of the tail fin. A little deformation, and two additional nodes, plus some details [copied from the body] make it recognizable.

Three variations of the tail fin process make the fins on the sides and the bottom.

2Dgameartguru - animating a fish in inkscape
2Dgameartguru - animating a fish in inkscape

A few circles make the eye [eye ball and iris with a highlight].

2Dgameartguru - animating a fish in inkscape

Separated it looks something like this. I exported the elements separately – body, tail fin, top fin, and three bottom fins as well as the eyeball and the iris – to create animated GIFs.

2Dgameartguru - inkscape toolbar

Animation via scale, skew and rotate

Note:
When exporting frames from Inkscape, it helps to add a transparent rectangle [encompassing the design in all its frames] to keep the size of the frames identical. 

2Dgameartguru - animating a fish in inkscape

We don’t want is some wild rotation. The fins move in a sideward motion for the tail and in a 90 degree turned 8 on the side. The latter is a bit of a problem, so we will try and get close to it using just rotation, scale, and skew.

This is more like it [in the most basic form].

2Dgameartguru - animating a fish in inkscape
2Dgameartguru - animating a fish in inkscape

Take the tail fin, move the pivot point [the small red cross] to the right side, and scale it horizontally. Duplicate the shape and scale a few more times to get the number of frames you need.
Do the same with the side fin, move the pivot point to the top right, and create the same number of duplicates as the tail fin while scaling.

2Dgameartguru - animating a fish in inkscape

When exporting the different frames, with just one frame visible [in the Objects panel], you would get animation like this.

2Dgameartguru - animating a fish in inkscape

For a slightly more dynamic animation, scale the fins up vertically as you move along the animation. I also added a slight skew towards the top left.

2Dgameartguru - animating a fish in inkscape

It’s getting a bit more interesting. I cheated and moved the iris just a little bit as well.

2Dgameartguru - animating a fish in inkscape

Combine the animation of the fins with a bit of body motion, scaling, and a slight rotation, as well as the top fin and the eye, and it looks more lively.

2Dgameartguru - animating a fish in inkscape
I hope enjoyed this quick tutorial. The cute fish was just too much fun. As always, I hope you have some fun with vectors for game art or designs and illustrations!