svg path

drawing lines

by prozoroff

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>-->

octagon
<svg viewBox = "0 0 1100 1400" version = "1.1">
    <path id = "s3" d = "M 247.93980074341826 223.44415730965122 222.67512902797293 C 247.93980074341826 223.44415730965122 222.67512902797293 249.75495918630978 217.1906251196244 251.6035980931289 213.32713504119758 222.67512902797293 C 253.45223699994804 209.46364496277076 254.72349924189686 207.36749132637058 257.3706227503063 203.8173091420218 222.67512902797293 C 260.01774625871576 200.267126957673 261.7459788372172 198.35840151894507 265.14240051698766 195.24168019302988 222.67512902797293 C 268.53882219675813 192.12495886711469 270.69416493439803 190.48176399449676 274.7753961441023...