HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>SVG Polyline — dashed connector</title>

</head>

<body>

  <h1>SVG &lt;polyline&gt; — dashed connector</h1>

  <svg width="240" height="120" role="img" aria-label="Dashed polyline connector between two points">

    <rect x="10" y="40" width="40" height="40" rx="6" fill="#e2e8f0" />

    <rect x="190" y="40" width="40" height="40" rx="6" fill="#e2e8f0" />

    <polyline points="50,60 90,30 150,90 190,60"

              fill="none" stroke="#b45309" stroke-width="3"

              stroke-dasharray="8 6" stroke-linecap="round" />

  </svg>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SVG Polyline — dashed connector (Try It)