SVG transform

Simple demo of using SVG transform with path 'd' attribute to create radial axes.

Apply transform attributes to a group (<g>) to modify all nested elements:

translate(x,y)
rotate(degree)

<!DOCTYPE html>
<meta charset='utf-8'>
<body>
  <div id="stage">
    <svg xmlns="https://www.w3.org/2000/svg" width="960" height="500">
      <g transform="translate(300,300) rotate(-60)">
        <path d="M -40,0 L 250,0" stroke="#000"></path>
        <circle cx="-40" cy="0" r="10"></circle>
        <circle cx="0" cy="0" r="10"></circle>
        <circle cx="250" cy="0" r="10"></circle>
      </g>
      <g transform="translate(500,300) rotate(10)">
        <path d="M -100,0 L 100,0" stroke="#000"></path>
        <circle cx="-100" cy="0" r="10"></circle>
        <circle cx="0" cy="0" r="10"></circle>
        <circle cx="100" cy="0" r="10"></circle>
      </g>
      <g transform="translate(200,200) rotate(60)">
        <path d="M -50,0 L 50,0" stroke="#000"></path>
        <circle cx="-50" cy="0" r="10"></circle>
        <circle cx="0" cy="0" r="10"></circle>
        <circle cx="50" cy="0" r="10"></circle>
      </g>
      <g transform="translate(550,150) rotate(-20)">
        <path d="M -100,0 L 100,0" stroke="#000"></path>
        <circle cx="-100" cy="0" r="10"></circle>
        <circle cx="0" cy="0" r="10"></circle>
        <circle cx="100" cy="0" r="10"></circle>
      </g>
    </svg>
  </div>
</body>