Snippet Zone

Drawing Gears With SVG

```
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;
```
```
}
```

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

August 6, 2021

// graphics // javascript // svg

Quick SVG

```
const el = document.body.appendChild(
```
```
    document.createElement('div'));
```

el.innerHTML = `<svg style='overlow:visible'>

  <circle cx="100" cy="20" r="20" fill="red" />

  <rect x="100" y="60" width="20" height="20" fill="blue" />

```
</svg>`;
```

Defining SVG like this in a template string is a fast and powerful way to start doing SVG that is controlled or generated by JavaScript. Here is another example:

const scribble = document.body.appendChild(

```
    document.createElement('div'));
```
```
const d = (iter = 30) => {
```
```
  // make sure the iter is odd
```
```
  if (iter % 2 == 0) iter += 1;
```
```
  // random cubic beziér
```
```
  let path = 'M ';
```
```
  for (let i = 0; i < iter; i++) {
```
```
    const cmd = i == 1 ? 'C ' : ' '
```

    path += cmd + Math.random() * 200 + ' ' + Math.random() * 200;

```
  }
```
```
  return path + 'z';
```
```
}
```

scribble.innerHTML = `<svg style='overlow:visible' viewBox="0 0 200 200">

```
  <path d="${d()}" 
```
```
    stroke="#295896" 
```
```
    stroke-width="3"
```
```
    fill="#ccc" 
```
```
    fill-rule="even-odd"
```

    vector-effect="non-scaling-stroke" />

```
</svg>
```
```
<style>
```
```
  svg, div, body, html {
```
```
    overflow: visible; 
```
```
    height: 100%; 
```
```
    width: 100%;
```
```
    margin: 0; padding: 0;
```
```
  }
```
```
</style>
```
```
`;
```

You’ll notice a somewhat hacky style tag as well… this is used to quickly fill the page with the SVG.

August 5, 2021

// graphics // javascript // paths // random // svg // tricks

Print a Tabula Recta (codegolf)

const tabulaRecta = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'

```
  .replace(/./g,"$&$'$`\n");
```
```
 
```

const pre = document.createElement('pre');

```
document.body.appendChild(pre);
```
```
pre.innerHTML = tabulaRecta;
```
```
 
```

// technique comes from https://codegolf.stackexchange.com/a/87035/63485

This snippet comes from the the codegolf stackexchange. A little while back a challenge for printing a tabula recta popped up along with a very nice answer from user Neil. Take a look at the answer here.

August 4, 2021

// codegolf // golfed // javascript // strings // tricks

Shuffle an Array

```
const nums = [1, 10, 20, 30, 50, 88];
```
```
nums.sort(() => Math.random() - 0.5);
```
```
console.log(nums);
```

Common way to shuffle the values in an array.

August 3, 2021

// arrays // javascript // tricks

Convert an Image to dataUri

```
function toDataUri(img, scalar = 1) {
```

  const canvas = document.createElement('canvas');

```
  canvas.width = img.width * scalar;
```
```
  canvas.height = img.height * scalar;
```

  canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);

```
  return canvas.toDataURL('image/png');
```
```
}
```
```
 
```
```
const img = new Image();
```
```
img.crossOrigin = 'Anonymous';
```
```
img.addEventListener('load', () => {
```
```
  const thumb = new Image();
```
```
  // use the data URI as the source
```
```
  thumb.src = toDataUri(img, .3);
```
```
  document.body.appendChild(thumb);
```
```
});
```

img.src = 'https://zevanrosser.com/fotoda/slide-shot-9.jpg';

Load an image and convert it to a data URI.

August 2, 2021

// graphics // javascript // tricks

Older Posts

Newer Posts

Drawing Gears With SVG

Quick SVG

Print a Tabula Recta (codegolf)

Shuffle an Array

Convert an Image to dataUri

Recent

Archive