JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<canvas></canvas>
cubic-bezier(0.03, 0, 0.08, 0.99)

CSS

body {
    margin: 0;
}

JavaScript

var canvas = document.querySelector('canvas'),
	context = canvas.getContext('2d'),
    width = canvas.width = window.innerWidth,
    height = canvas.height = window.innerHeight,
    
    target = {
    	x: width,
        y: Math.random() * height
    },
    
    position = {
    	x: 0,
        y: Math.random() * height
    };
    
    ease = 0.5;
    
    update();
    
    function update(){
    	context.clearRect(0,0,width,height);
        
        context.beginPath();
        context.arc(position.x, position.y, 10, 0, Math.PI * 2, false);
        context.fill();
        
        var dx = target.x - position.x,
        	dy = target.y - position.y,
            vx = dx * ease,
            vy = dy * ease;
        
        requestAnimationFrame(update);
    }