JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/two.js/0.4.0/two.min.js"></script>
<div></div>

JavaScript

var elem=document.querySelector("div");
var h=window.innerHeight;
var w=window.innerWidth;
var two=new Two({fullscreen: true}).appendTo(elem);
var vy=5, vx=5;

var circle1=two.makeCircle(300,200,50);
circle1.fill="orange";
circle1.stroke="purple";
circle1.linewidth=5;

two.bind("update", function(frameCount){
    circle1.translation.x+=vx;
    circle1.translation.y+=vy;
    if(circle1.translation.x+30>w||circle1.translation.x-30<0){
        vx*=-1;
        circle1.translation.x+=vx;
    }
    if(circle1.translation.y+30>h||circle1.translation.y-30<0){
        vy*=-1;
        circle1.translation.x+=vy;
    }
}).play();