Snippet Zone

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

Raphaël was my first deep dive into SVG. Back then, only VML was supported in older IE versions, so using Raphaël was key for tons of commercial work I did (Raphaël generated VML as well as SVG). This snippet is the Catmull Rom code from Raphaël. I’m pretty sure I didn’t know what a Catmull Rom spline was until I found out that using `R` in a path wasn’t supported natively in SVG… and was actually some magic thing that existed in Raphaël alone.

October 1, 2021

// curves // javascript // math // svg

John Wallis Pi (Wallis Product)

```
/*
```

It was always my affectation even from a child, in all pieces

of Learning or Knowledge, not merely to learn by rote, which

is soon forgotten, but to know the grounds or reasons of what

I learn; to inform my Judgement, as well as furnish my Memory;

and thereby, make a better Impression on both.

```
 
```
```
- John Wallis
```
```
 
```
```
*/
```
```
 
```
```
i = c = 1
```
```
setInterval(_ => {
```
```
  for (j = 0; j < 1000; j++, i += .5)
```

    c *= (~~i * 2) / (~~(i - .5) * 2 + 1)

```
 
```

  console.log(c * 2 + '\n' + 3.141592653589793)

```
}, 16);
```

π = 2

2 / 1

2 / 3

4 / 3

4 / 5

6 / 5

6 / 7

8 / 7

8 / 9

· · · ·

I was at an old book store a few days ago and randomly picked up History of Mathematics Vol. I by David Eugene Smith 1923 for $7.50. After enjoying flipping around and reading different parts, I pulled up Wikipedia to read more about the author… From there I found some interesting quotes from talking about John Wallis – when I saw the Wallis Product I was inspired to write a quick snippet.

September 30, 2021

// golfed // javascript // math // pi

Older Posts

Newer Posts

Animation Along Path SVG

Object Getter Setter

Ellipse Path SVG

Catmull Rom to Bezier SVG

John Wallis Pi (Wallis Product)

Recent

Archive