SVG Playground

<line>

Draw lines in SVG. Set start and end points, stroke style, dash pattern and copy the SVG code.

Preview

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <line x1="20" y1="180" x2="180" y2="20" stroke="#111827" stroke-width="4" stroke-linecap="round" />
</svg>

Attributes

Tweak any value to update the preview live.

Start X20

Start Y180

End X180

End Y20

Stroke

Stroke width4

Dash pattern

Line cap

Related SVG tags