HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SVG Stroke — stroke-linejoin comparison</title>
</head>
<body>
  <h1>SVG Stroke — stroke-linejoin comparison</h1>
  <svg width="300" height="170" viewBox="0 0 300 170" role="img" aria-label="Three angled polylines showing miter, round, and bevel joins">
    <text x="20" y="26" font-size="14">miter</text>
    <polyline points="90,45 140,15 190,45"
              fill="none" stroke="#7c3aed" stroke-width="16" stroke-linejoin="miter" />

    <text x="20" y="86" font-size="14">round</text>
    <polyline points="90,105 140,75 190,105"
              fill="none" stroke="#16a34a" stroke-width="16" stroke-linejoin="round" />

    <text x="20" y="146" font-size="14">bevel</text>
    <polyline points="90,165 140,135 190,165"
              fill="none" stroke="#dc2626" stroke-width="16" stroke-linejoin="bevel" />
  </svg>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SVG Stroke — stroke-linejoin comparison (Try It)