A character, with bones that bend.

Make a 2D skeletal animation in your browser, nothing uploaded: a character whose bones bend its arms and legs, with hands and feet that reach for a target.

By Suraj Kumar5 November 20266 min read

Moving a drawn character by hand means moving every point of every arm in every key. Skeletal animation moves a few bones instead, and the drawing follows them. KeepSimp's 2D skeletal animation page opens the Animation maker on a character that is already rigged, in your browser, with nothing uploaded and no account.

Start from a figure with a skeleton.

The page opens on a starter character: a simple figure drawn with shapes and a skeleton of bones inside it, one for the body and two for each arm and each leg. Its limbs are bound to the bones, so they bend at the elbows and knees, and it already moves in a loop you can change.

Everything in it is made of the editor's own shapes, bones and keys, so every part can be changed, redrawn or taken away.

Bones, and what moves with them.

A bone is a line with a joint at its start. Turn a bone and every bone after it in the chain turns with it, as a hand follows a forearm. Draw a chain of your own with the Bone tool: each click adds a bone joined to the one before.

A part put inside a bone moves with it as a whole, as a hat moves with a head. That is enough for parts that do not bend.

Limbs that bend.

A part that has to bend, such as an arm, is bound to bones. Each point of its path then follows up to four bones, each by a weight, so the points near an elbow follow both bones a little and the bend stays smooth. The weights are made for you when you bind, and you can paint them more or less where a bend looks wrong.

A picture can bend too. Give it a mesh made from its outline, and the mesh's points follow the bones the way a path's do.

Hands and feet that reach.

Turning bones one by one is slow when you only want a hand on a table. A reach constraint, known as inverse kinematics or IK, works the other way: drag the target, and the two bones of the arm turn exactly so that the hand touches it, bending at the elbow the way you chose.

Longer chains, such as a tail, bend each joint in turn towards the target, as Rive's runtime does, so a file plays the same in both. A constraint has a strength that can be keyed, so a foot can stay planted on the ground and then let go.

Make it move, then change the loop.

In Animate, set keys on the bones and on the targets: where each stands and how far it turns at each moment. Easing decides how it moves between keys, Slow down for a soft step and Overshoot for a little bounce.

The loop plays round and round or there and back. Every change can be undone, one step at a time.

Save it for where it will go.

Export asks where it will go. An interactive animation for a website or an app writes a .riv, which keeps the bones, bindings, meshes and constraints as Rive's runtime plays them; Rive's own runtime reads it back before it is offered, and what the file cannot hold is said.

Social media gets an MP4, a chat or an email a GIF, and an app's code a Lottie. In those, and in an animated SVG, the rig's movement is written in frame by frame, and the result says so. A picture bent by a mesh cannot bend in a Lottie, so it stays whole there, and that is said too.

A little less theory. A little more doing.

Try it on your own terms, with a free browser tool.

Try the tool