svg path

drawing lines

HTML

<!--arrow/pointer
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="
            M100,100
            L50,75 50,75 75,75 75,50 Z
            "
          style="stroke:green; fill:limegreen;"/>    
</svg>-->

<!--square
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="
            M50,50
            L50,75 50,75 75,75 75,50 Z
            "
          style="stroke:green; fill:limegreen;"/>    
</svg>-->
<!--right triangle 1
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="
            M200,0
            L0,200 0,0 Z
            "
          <!--d="
            M0,200
            L0,0 200,0 Z
            "->same

          style="stroke:green; fill:limegreen;"/>    
</svg>-->

<!--right triangle 2
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="
            M0,0
            L0,200 200,200 Z
            "
          style="stroke:green; fill:limegreen;"/>    
</svg>-->

<!--<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="
            M50,50
            L50,90 90,130 130,90 90,50  z
            "
          style="stroke:green; fill:limegreen;"/>    
</svg>-->
<p id="output">

</p>

<svg viewBox = "0 0 400 400" version = "1.1">
    <path id="path1" d = "M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60" fill = "none" stroke = "green" stroke-width = "3"/>
<!--         <path d = "M 100 0 L 160 0 L 220 100 L 220 160 L 160 220 L 120 220 L 0 160 L 0 120" fill="none" stroke = "green" stroke-width = "3"/> -->
</svg>

CSS

body {
  background: #222222;
}

#output{
  color: Green;
}

JavaScript

let path = document.querySelector('#path1');
let paragraph = document.querySelector('#output');

paragraph.innerHTML("output");