SVG — Character Rigging

A character is a hierarchy of joints. Each joint is a <g> placed at its pivot; rotating it rotates everything below it — exactly like a skeleton. Toggle the joint dots to see the rig.

a rigged figure — wave & walk

1.0×
a joint is a translated, rotated group
<g id="shoulder" transform="translate(82 98) rotate(θ_shoulder)">
  <line .../>                          <!-- upper arm -->
  <g id="elbow" transform="translate(0 26) rotate(θ_elbow)">
    <line .../>                        <!-- forearm: inherits shoulder's rotation -->
  </g>
</g>
// per frame: shoulder.setAttribute('transform', `translate(82 98) rotate(${deg})`)

Rotating the shoulder swings the forearm too — child transforms compose with the parent's. That inheritance is the whole trick behind skeletal animation.