JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <title>basic pattern</title>

    <defs>
        <pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image>
        </pattern>
        <pattern id="pat2" width="179" height="132" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image>
        </pattern>
    </defs>
    <rect id="rect1" x="0" y="0" width="179" height="132" fill="url(#pat1)"/>
    <rect id="rect2" x="0" y="150" width="179" height="132" fill="url(#pat2)"/>
</svg>

JavaScript

var i = 0;
var newX;
setInterval(
    function(){
        $('rect').attr('x', Math.sin(i+=.01)*100+100);      
        $('#pat1').attr('x', $("#rect1").attr('x'));
    }, 100);