What is Swab Animator?

Swab Animator is a browser-based WebApp for quickly creating smooth simple Scalable Vector Graphics (SVG) animations on a computer, phone, or tablet. It is currently under development. Ultimately, it will be possible to create and share animations via the project's website or download.


In Swab Animator, all animations (files) are composed of frames, which contain what are called joints, and shapes connected to the joints.

Joints are invisible nodes that connect to one another and form the "skeleton" of an animation. A joint has a length, scale, and rotation relative to the joint it is connected to, or to the center of the frame if it isn't connected to anything.

Shapes are just a list of joints and a few other properties, such as color. The shapes are what will be seen in the final animation. Shapes are drawn by "connecting the dots" to each joint, forming a polygon. Circles and cylinders/cones are also drawn on each joint and each joint's connection respectively to avoid jagged edges in the resulting animation.

Joints and Shapes are modified within frames, which can be equated to the individual "pictures" of what will make the final animation. In the final animation, each joint and shape modification in one frame smoothly transitions to the frame after it at a specified rate (or "framerate").

Files are where the editable animation is stored. They are fundamentally a list of operations (or transactions) that can be composed to generate the current state (or any state) of the frames, shapes and joints that make up an animation. They will be saved in the user's browser session, and eventually inside a user's account. They are referenced via a url in the address bar.