JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://kiln.it/talkie/ui/1.0/talkie.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://kiln.it/talkie-1.0.min.js"></script>

<body id="example-02-head-shoulders" onunload="">
    <div id="wrapper">

<object id = "stickman">
<svg
    version='1.1'
    xmlns='http://www.w3.org/2000/svg'
    width='360'
    height='423'
    viewBox='0, 100, 600, 650'
    preserveAspectRatio='none'>
   <defs/>
   <g
       id='stickman'
       transform='translate(0 0)'
       style='fill:#000000;fill-opacity:1;stroke:#000000;stroke-opacity:1;fill-rule:nonzero;stroke-linecap:square;stroke-linejoin:miter;stroke-width:1;stroke-miterlimit:10'>
      <path
          style='fill:none;stroke:#804000;stroke-width:4'
          id='torso'
          d='M296.4609375,335.8515625 C288.826075803,353.640986188 274.481633005,376.194804361 273.62890625,389.05078125 C273.163786485,396.063073187 276.18122157,440.856660183 273.62890625,469.92578125 C271.69480176,491.953904939 274.91464368,541.748669815 273.62890625,554.56640625
C272.973351575,561.101742976 271.174824529,573.972879232 271.59375,575.98046875'/>
      <path
          style='fill:none;stroke:#804000;stroke-width:4'
          id='arms'
          d='M252.3359375,458.875 C260.91480721,459.76574507 269.556497496,456.469855777 282.3203125,461.98828125 C283.937362724,462.687411655 298.022128855,460.881717069 310.33984375,468.21484375 C315.314787691,471.176585799 386.083547104,498.900584772 427.19140625,509.7265625
C440.733781046,513.293020374 399.046488869,501.778822345 391.75,496.66015625M254.8671875,461.140625 C246.518646437,460.514562973 217.719030153,462.868109434 213.3515625,458.02734375 C203.367314502,446.961112943 189.182153474,458.611704973 161.4609375,443.49609375 C149.703241717,437.084947915 138.675094984,432.348110283 133.82421875,433.15625'/>
      <path
          style='fill:none;stroke:#804000;stroke-width:4'
          id='head'
          d='M299.453125,341.40625...

CSS

body { background: white; font-family: Helvetica, Arial, sans-serif; }
      #wrapper { width: 800px; margin: auto; position: relative; }
      #controls { width: 790px; padding: 0 5px; }
      #controls audio { width: 100%; }
      #stickman { margin-left:250px; }
      #credits  { text-align: right; margin: 8px 6px 0 0; }
      #credits a { color: #C3004D; }

JavaScript

function init() {
            var svg2 = document.getElementById("stickman"),
                animate = Talkie.animate(svg2);

            var arms = animate.select("#arms");
            
            function touch(body_part) {
                return arms.morphTo("#arms-" + body_part, 200).and(
                animate.select("#" + body_part).style("opacity", "1", 100));
            }

            var stickman = animate.select("#stickman");
            var timeline = Talkie.timeline("#controls", {
                0.1: stickman.attr("transform", "translate(800 0)", 2000),
                2.6: stickman.attr("transform", "translate(0 0)", 1000),
                4.5: function () {
                    // Make the stickman jump
                    stickman.element.attr("transform", "translate(0 0)")
                        .transition().duration(600).ease(function (t) {
                        return 1 - Math.pow(2 * t - 1, 2);
                    }).attr("transform", "translate(0 -100)");
                },

                6.0: touch("head"),
                6.5: touch("shoulders"),
                7.2: touch("knees"),
                7.7: touch("toes"),
                8.2: touch("knees"),
                8.7: touch("toes"),

                9.0: touch("neutral"),

                10.0: touch("eyes"),
                11.2: touch("ears"),
                12.3: touch("mouth"),
                13.5: touch("nose"),

                14.0: touch("neutral"),

                14.3: touch("head"),
                15.1: touch("shoulders"),
                15.7: touch("knees"),
                16.2: touch("toes"),
                16.7: touch("knees"),
                17.2: touch("toes"),

                // move the arms into the neutral position and zoom in on stickman’s face.
                18.0: touch("neutral").and(
                stickman.attr("transform", "scale(1.8) translate(-165 -50)", 1000))
            });
            Talkie.ui.playButton("#wrapper", timeline);
   ...