Snippet Zone

Upload Image

const uploadInput = document.body.appendChild(

  Object.assign(document.createElement('input'), {

```
    type: 'file',
```
```
    accept: 'image/png, image/jpeg'
```
```
  })
```
```
);
```
```
 
```

const imageEl = document.body.appendChild(

  Object.assign(document.createElement('img'), {

```
    style: `
```
```
            display:block;
```
```
            width: 100%;
```
```
          `
```
```
  })
```
```
);
```
```
 
```
```
const reader = new FileReader();
```
```
 
```
```
reader.addEventListener('load', () => {
```
```
  imageEl.src = reader.result;
```
```
});
```
```
 
```

uploadInput.addEventListener('change', e => {

```
  const file = e.target.files[0];
```
```
  if (file != null) {
```
```
    reader.readAsDataURL(file);
```
```
  }
```
```
});
```

Load an image into memory…

October 6, 2021

// images // javascript // ui

Flatten Array Golf

```
 
```

console.log([100, 200, [2], [3, 4, [2, 3, [5]], 100]]+'')

```
// outputs: "100,200,2,3,4,2,3,5,100"
```

Coercing a multidimensional array to a string flattens it and joins it with commas

October 5, 2021

// arrays // codegolf // javascript // strings

Animation Along Path SVG

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

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

```
    <path 
```

      d="M 20 10 C 100 100 300 00 300 100 200 200 150 300 20 10"

      stroke="black" fill='none' vector-effect="non-scaling-stroke"/>

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

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

const circle = el.querySelector('circle');

```
const path = el.querySelector('path');
```
```
const length = path.getTotalLength();
```
```
let pos = 0;
```
```
 
```
```
function loop() {
```
```
  pos += 3;
```
```
  if (pos > length) {
```
```
    pos = 0;
```
```
  }
```

  const point = path.getPointAtLength(pos);

```
  circle.cx.baseVal.value = point.x;
```
```
  circle.cy.baseVal.value = point.y;
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

SVG has an easy way to animate something along an arbitrary path… getPointAtLength

October 4, 2021

// animation // curves // javascript // svg // tricks

Object Getter Setter

```
const book = {
```
```
  get name() { 
```
```
    return this.title ?? 'no title'; 
```
```
  },
```
```
  set name(val) { 
```
```
    document.
```
```
      body.
```

      innerHTML += `name changed to "${val}"<br>`;

```
    this.title = val; 
```
```
  }
```
```
};
```
```
 
```
```
console.log(book.name);
```
```
book.name = 'Math Book';
```
```
book.name = 'JavaScript Book';
```

Getter setter syntax for Object literal.

October 3, 2021

// javascript // objects

Ellipse Path SVG

```
const ellipse = (cx, cy, rx, ry) => { 
```
```
  if (ry == null) ry = rx;
```
```
  return `
```
```
    M${cx-rx} ${cy}a${rx} ${ry} 
```
```
    0 1 0 ${rx*2} 0a${rx},${ry} 
```
```
    0 1 0 -${rx*2},0`
```
```
}
```
```
 
```
```
const svg = `
```

<svg style="overflow:hidden;stroke:black;fill:none">

```
  <path d="${ellipse(80, 50, 30)}" />
```

  <path d="${ellipse(80, 120, 60, 20)}" />

  <path d="${ellipse(150, 60, 20, 40)}" />

```
</svg>`
```
```
 
```
```
document.body.innerHTML = svg;
```

Draw an ellipse inside an svg path. I saw this method over on this stackoverflow thread at some point and tweaked it a little bit. Very nice simple solution from user yogi

October 2, 2021

// javascript // strings // svg // tricks

Older Posts

Newer Posts

Upload Image

Flatten Array Golf

Animation Along Path SVG

Object Getter Setter

Ellipse Path SVG

Recent

Archive