JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<script type="text/processing" data-processing-target="mycanvas">
// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
int csize = 400;
float rX;
float rY;

// Setup the Processing Canvas
void setup(){
  size( csize, csize);
  strokeWeight( 3 );
  frameRate( 15 );
  X = width / 2;
  Y = height / 2;
  nX = X;
  nY = Y;
  rX = radius;
  rY = radius;    
}

// Main draw loop
void draw(){
  
  radius = radius + 3 * sin( frameCount / 4 );
  
  // Set fill-color to blue
  fill( 0, 121, 184 );
  
  // Track circle to new destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;
    
    // boundary checks
    if ((nX - Math.floor(radius)) <= 0) {
    nX = Math.ceil(radius) / 2;
    }
    
    if ((nY - Math.floor(radius)) <= 0) {
    nY = Math.ceil(radius) / 2;
    }   
    
    if ((csize - nX) <= Math.floor(radius)) {
    nX = csize - Math.ceil(radius) / 2;
    }
    
    if ((csize - nY) <= Math.floor(radius)) {
    nY = csize - Math.ceil(radius) / 2;
    }
  
  // Fill canvas grey
  background( 100 );
  
  // Set stroke-color white
  stroke(255); 
  
  // Draw circle
  // squash according to relative mouse position
    rX = radius - Math.min(abs((nX-X)/2), 40);
    rY = radius - Math.min(abs((nY-Y)/2), 40);
  ellipse( X, Y, rX, rY );                  
}


// Set circle's next destination
void mouseMoved(){
  nX = mouseX;
  nY = mouseY;  
}
</script>

<canvas id="mycanvas"></canvas>
</body>