<div class="element"></div>

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.element {
  width: 60px;
  height: 60px;
  background: #005574;
  border-radius: 50%;
  transition: transform 1s linear;
}

document.addEventListener('DOMContentLoaded', () => {
  const element = document.querySelector('.element');
  const maxTurn = 60; // максимальный угол поворота
  const step = 10;
  
  let deg = +(Math.random() * 360).toFixed();
  let translate = { x: 0, y: 0 };
  
  setInterval(() => {
    deg += +(Math.random() * maxTurn * 2 - maxTurn).toFixed();
    const shift = getShift(deg, step);
    translate = {
      x: translate.x + shift.x,
      y: translate.y + shift.y,
    };
    element.style.transform = `translate(${translate.x}px,${translate.y}px)`;
  }, 1000);
  
  function getShift(deg, step) {
    return {
      x: +(Math.cos(deg * Math.PI / 180) * step).toFixed(),
      y: +(Math.sin(deg * Math.PI / 180) * step).toFixed(),
    };
  };
});