const el = document.body.appendChild(

  document.createElement('div'));

el.innerHTML = `

  <svg id="svg" width="100%" height="100%" viewBox="0 0 550 496">

    <path id='path' d="M 10 10 L 100 100" stroke="black" fill='none' vector-effect="non-scaling-stroke"/>

  </svg>

  <style>

    svg, div, body, html {

      overflow: visible; 

      height: 100%; 

      width: 100%;

      margin: 0; padding: 0;

    }

  </style>

  `;

// a variation on something from my old 

// site https://actionsnippet.com/?p=1175

const TWO_PI = Math.PI * 2;

let cmds = '';

// x, y, max radius, notch number

drawVerts(calcGear(200, 200, 50, 6));

drawVerts(calcGear(400, 200, 30, 3));

drawVerts(calcGear(300, 350, 30, 20));

drawVerts(calcGear(400, 400, 30, 2));

dotVerts(drawVerts(calcGear(150, 400, 30, 6)));

// `<path id=...` becomes a global o_Ö

window.path.setAttribute('d', cmds);

function calcGear(x, y, maxRad, notches) {

  let verts = [],

      step = TWO_PI / (notches * 8),

      mod = 0, r;

  for (let i = 0; i <= TWO_PI; i += step) {

    r = (parseInt(mod) % 2 + 1) * maxRad;

    mod += .25;

    verts.push(x + r * Math.cos(i));

    verts.push(y + r * Math.sin(i));

  }

  return verts;

}

function drawVerts(verts) {

  cmds += `M ${verts[0]} ${verts[1]} L`;

    for (let i = 2; i < verts.length; i += 2) {

    cmds += ` ${verts[i]} ${verts[i + 1]} `

    }

  cmds += 'z ';

  return verts;

}

function dotVerts(verts, rad = 3) {

  let dots = '';

  for (let i = 2; i < verts.length; i+=2) {

    dots += `

      <circle 

        cx="${verts[i]}" cy="${verts[i + 1]}"

        r="${rad}"

        fill="red" />

    `

  }

  // another global o_Ö 

  window.svg.innerHTML += dots;

}