)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Drawing Gears With SVG

  1. const el = document.body.appendChild(
  2.   document.createElement('div'));
  3.  
  4. el.innerHTML = `
  5.   <svg id="svg" width="100%" height="100%" viewBox="0 0 550 496">
  6.     <path id='path' d="M 10 10 L 100 100" stroke="black" fill='none' vector-effect="non-scaling-stroke"/>
  7.   </svg>
  8.   <style>
  9.     svg, div, body, html {
  10.       overflow: visible; 
  11.       height: 100%; 
  12.       width: 100%;
  13.       margin: 0; padding: 0;
  14.     }
  15.   </style>
  16.   `;
  17.  
  18. // a variation on something from my old 
  19. // site https://actionsnippet.com/?p=1175
  20.  
  21. const TWO_PI = Math.PI * 2;
  22. let cmds = '';
  23.  
  24. // x, y, max radius, notch number
  25. drawVerts(calcGear(200, 200, 50, 6));
  26. drawVerts(calcGear(400, 200, 30, 3));
  27. drawVerts(calcGear(300, 350, 30, 20));
  28. drawVerts(calcGear(400, 400, 30, 2));
  29. dotVerts(drawVerts(calcGear(150, 400, 30, 6)));
  30.  
  31. // `<path id=...` becomes a global o_Ö
  32. window.path.setAttribute('d', cmds);
  33.  
  34. function calcGear(x, y, maxRad, notches) {
  35.   let verts = [],
  36.       step = TWO_PI / (notches * 8),
  37.       mod = 0, r;
  38.   for (let i = 0; i <= TWO_PI; i += step) {
  39.     r = (parseInt(mod) % 2 + 1) * maxRad;
  40.     mod += .25;
  41.     verts.push(x + r * Math.cos(i));
  42.     verts.push(y + r * Math.sin(i));
  43.   }
  44.   return verts;
  45. }
  46.   
  47. function drawVerts(verts) {
  48.   cmds += `M ${verts[0]} ${verts[1]} L`;
  49.     for (let i = 2; i < verts.length; i += 2) {
  50.     cmds += ` ${verts[i]} ${verts[i + 1]} `
  51.     }
  52.   cmds += 'z ';
  53.   return verts;
  54. }
  55.  
  56. function dotVerts(verts, rad = 3) {
  57.   let dots = '';
  58.   for (let i = 2; i < verts.length; i+=2) {
  59.     dots += `
  60.       <circle 
  61.         cx="${verts[i]}" cy="${verts[i + 1]}"
  62.         r="${rad}"
  63.         fill="red" />
  64.     `
  65.   }
  66.   // another global o_Ö 
  67.   window.svg.innerHTML += dots;
  68. }

Using yesterdays technique, this is a variation of an old snippet from ActionSnippet.com

snippet.zone ~ 2021-22 /// {s/z}