demo · v137

Shape Editor

Drag the four control points (green = start, rose = end, ivory = intermediate). The textbox below shows the live shape() string and the blue dot traces it in real time. Copy-paste the output straight into any stylesheet.

probing…

live offset-path

—

the code

.mover {
  /* live-rebuilt from drag positions */
  offset-path: shape(from 10% 50%, line to 30% 20%, line to 70% 80%, line to 90% 50%);
  offset-rotate: auto;       /* mover faces along the path */
  animation: travel 4s linear infinite;
}
@keyframes travel { to { offset-distance: 100%; } }

see also