JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
 "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="300px" height="250px" style="fill:#AAEEBB;" >
  <g transform="translate(50,50)" style="fill:none;stroke:#AABBEE;stroke-linejoin:round;stroke-width:4px;stroke-dasharray:4,4;">
    <path d="M 0,0 L100,0 L100,45
             M0,100 L50,50 L100,125      m20,0 v-30 l20,-20
             M0,150 h50 v-25             M100,150 h50 v25
             M0,5 Q 20,20 40,5
             "></path>
  </g>
</svg>

<h3>Mnemo</h3>
<b>10 commands:</b> M, L, H, V, C, S, Q, T ou A, Z. <br />
<ul>
    <li>M start at x,y</li>
    <li>L lineup to x,y</li>
    <li>H horizontal line +x</li>
    <li>V vertical line +y</li>
    <li>C</li>
    <li>S</li>
    <li>Q bezier: attracted by x1,y1 line up x2,y2. ex "M0,0 Q5,5 20,0".</li>
    <li>T ou A : A for circle arcs.</li>
    <li>Z: and line back to beggining of path (closing path command) </li>
</ul>
<b>2 coordinates systems:</b>
<ul>
    <li>UPPER case : absolute coordinates.</li>
    <li>lower case : relative to previous point.</li>
</ul>

CSS

svg { border: 3px solid #6688CC;}