html,

body {

  width: 0%;

  height: 100%;

  display: flex;

}

​

.wrapper {

  position: relative;
10
  margin: auto;

}

​

.cyclist {

  width: 48px;

  height: 48px;

  position: absolute;

  transform: translateY(-50%);  // position the rider above the curve. could be done with offset-position but it has no browser support yet

  offset-path: path("M1 260C65.034 260.999 102.054 253.632 130.069 241.15C158.083 228.668 177.093 244.645 1.612 258.125C246.13 271.606 296.157 293.574 342.181 258.125C388.6 222.677 405.715 140.297 479.754 139.798C553.793 139.298 591.313 207.699 667.854 258.125C744.395 308.552 782.416 287.783 802.425 269.608C846.949 229.167 924.49 109.841 943 1");

  animation: ride-hills 10s ease-in infinite;
20
}
21
​