<canvas id="cart"></canvas>
<div id="the-cart" class="cart"></div>

body {
  overflow: hidden;
}

.cart {
  background-color: rgb(100, 210, 128);
  height: 50px;
  width: 50px;
  border: 1px solid black;
  border-radius: 50px;
  position: absolute;
  left: 10vw;
  top: 30vh;
  animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards,
    pointOfCircle 0s linear forwards, loop 3s linear forwards,
    x3 1s linear forwards;
  animation-delay: 0s, 0s, 4s, 4.5s, 4.5s, 7.5s;
}

@keyframes x {
  to {
    left: 40vw;
  }
}

@keyframes y {
  to {
    top: 29.99vh;
  }
}

@keyframes x2 {
  to {
    left: 50vw;
  }
}

@keyframes pointOfCircle {
  to {
    top: 20vh;
  }
}

@keyframes loop {
  from {
    transform: rotate(0deg) translateY(10vh) rotate(0deg);
  }
  to {
    transform: rotate(-360deg) translateY(10vh) rotate(360deg);
  }
}

@keyframes x3 {
  to {
    left: 70vw;
  }
}

let canvas = document.getElementById("cart");
let ctx = canvas.getContext("2d");
let width = (canvas.width = window.innerWidth);
let height = (canvas.height = window.innerHeight);

let tail;

let cart = document.getElementById("the-cart");

let last = Date.now();

class Tail {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.tx = 1;
    this.ty = 1;
    this.lastx = x;
    this.lasty = x;
  }

  move(tx, ty) {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(tx, ty);
    ctx.stroke();
    this.x = tx;
    this.y = ty;
    this.tx = tx;
    this.ty = ty;
  }
}

let startAnimation = () => {
  let newOffset = getOffset(cart);
  tail.move(newOffset.left, newOffset.top);
  window.requestAnimationFrame(startAnimation);
};

window.onload = function () {
  let offset = getOffset(cart);
  tail = new Tail(offset.left, offset.top);
  window.requestAnimationFrame(startAnimation);
};

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX + 25,
    top: rect.top + window.scrollY + 25,
  };
}