rounding.js

const constructStyle = (x, y) => `
    position: fixed;
    left: ${x}px;
    top: ${y}px;
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 25px;
`;

const box = document.createElement('span');
box.style = constructStyle(0, 0);
document.body.appendChild(box);

function animateTo(t) {
    if (t > 1.0) t -= 1.0;
    const theta = 2 * 3.14 * t;
    const { width, height } = window.screen;
    const center = [width / 2, height / 2];
    const radius = Math.min(width, height) / 4;
    const [x, y] = [center[0] + radius * Math.cos(theta), center[1] + radius * Math.sin(theta)];
    box.style = constructStyle(x, y);
    setTimeout(() => animateTo(t + 0.01), 1000 / 60);
}

animateTo(0.0);