svgs.js

<svg> // The <svg> tag creates the canvas for svg elements
  <g transform="translate(100,50)"> // The <g> is used to group elements.  We can now move the circle and label together.
    <circle cy="100" cx="200" r="30"></circle> 
    <text> The label for the circle</text>
  </g>
  
  
  <rect x="410" y="200" height="25" width="25"></rect>
  
  // Use path svg elements to drag squiggly lines.
  // You certainly don't want to do these manually.
  <path style="fill:none;stroke:gray;stroke-width:4px;" d="M 10,60 40,30 50,50 60,30 70,80" transform="translate(0,0)" />
  <path style="fill:black;stroke:gray;stroke-width:4px;" d="M 10,60 40,30 50,50 60,30 70,80" transform="translate(0,100)" />
  <path style="fill:none;stroke:gray;stroke-width:4px;" d="M 10,60 40,30 50,50 60,30 70,80Z" transform="translate(0,200)" />
  <path style="fill:black;stroke:gray;stroke-width:4px;" d="M 10,60 40,30 50,50 60,30 70,80Z" transform="translate(0,300)" />
</svg