<div class="mover mover-path">path()</div>

<div class="mover mover-circle">circle()</div>

<div class="mover mover-ellipse">ellipse()</div>

<div class="mover mover-inset">inset()</div>

<div class="mover mover-polygon">polygon()</div>
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mover {
  width: 100px;
  height: 80px;
  border-radius: 50%;
  line-height: 80px;
  text-indent: 10px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/pointer-hand.svg) no-repeat;
  background-size: cover;
  color: white;
  animation: move 3s linear infinite;
  // position: absolute;
  // left: 50%;
  // transform: translateX(-50%);
  // transform-origin: center center;
  geometry-box: 50px 0 100px;
}
.mover-path {
  top: 50px;
  motion-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
}
.mover-circle {
  top: 150px;
  motion-path: circle(100px at 50px 50px);
}
.mover-ellipse {
  top: 250px;
  motion-path: ellipse(25% 40% at 50% 50%);
}
.mover-inset {
  top: 350px;
  motion-path: inset(5% 20% 15% 10%);
}
.mover-polygon {
  top: 450px;
  motion-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

@keyframes move {
  100% { motion-offset: 100%;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.