Motion paths in action

<div id="heart">
  <div id="motion-demo"></div>
</div>

#motion-demo {
  offset-path: path(
    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
  );
  animation: move 3000ms infinite linear;
  width: 10px;
  height: 10px;
  background: red;
}
#heart {
  width: 200px;
  height: 200px;
  background-color: lightpink;
  clip-path: path(
    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
  );
}
@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

In this example, we used CSS masking and CSS shapes to clip a container with a light pink background into a heart shape. We used a path() function as the value of the clip-path property. Its child is a 10px by 10px red box that is made to follow the edge of its parent. We did this by using the same <basic-shape> as the path, setting the box's offset-path property to the same path() function value. We used CSS animations to change the offset-distance from 0% to 100% over three seconds.