JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="utf-8" ?>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px">
    <g id="theatre">
        <rect id="stage" fill="#FFFFFF" stroke="#000000" width="800" height="600" />
    </g>
    <g id="targets">
        <g id="red">
            <rect id="rect_red" x="108" y="114" width="64" height="64" rx="8" ry="8" fill="#FF173D" stroke="#000000" transform="translate(-108, -114)" />

        </g>
    </g>
</svg>

JavaScript

$(document).ready(function () {
    var svg = $('svg').get(0),
        square = svg.getElementById('red'),
        animation = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion');
    animation.setAttributeNS(null, 'id', 'walker');
    animation.setAttributeNS(null, 'begin', 'indefinite');
    animation.setAttributeNS(null, 'end', 'indefinite');
    animation.setAttributeNS(null, 'dur', '10s');
    animation.setAttributeNS(null, 'repeatCount', 'indefinite');
    animation.setAttributeNS(null, 'path', 'M 0 0 H 800 Z');
    square.appendChild(animation);
    console.log(animation);
    console.log(typeof animation.beginElement); 
    animation.beginElement();    
});