Draw a line (path) with pure CSS from one point to another

This is obviously what SVG (Structured Vector Graphics) are for.

<svg>
    <polyline points="20,20 800,200 950,500 0,800 0,0"></polyline>    
</svg>

Working sample here.

Or at a usable speed here.

You can animate the start point of a line in svg (also reversed) "stroke-dashoffset" like this example in codepen

@keyframes dash {
  0% {
    stroke-dashoffset: 500;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

https://codepen.io/Yudo/full/OaEWXK

Related