Snippet Zone

Catmull Rom to Bezier SVG

```
// from: 
```

//   https://github.com/DmitryBaranovskiy/raphael/blob/b5fdbdc9850827eb49622cd0bc81b26025f8128a/dev/raphael.core.js#L1019

```
// and: 
```

//   http://schepers.cc/getting-to-the-point

```
 
```

function catmullRom2bezier(crp, close) {

```
  const d = [];
```

  for (let i = 0, iLen = crp.length; iLen - 2 * !close > i; i += 2) {

```
    const p = [
```
```
      { x: crp[i - 2], y: crp[i - 1] },
```
```
      { x: crp[i], y: crp[i + 1] },
```
```
      { x: crp[i + 2], y: crp[i + 3] },
```
```
      { x: crp[i + 4], y: crp[i + 5] }
```
```
    ];
```
```
    if (close) {
```
```
      if (!i) {
```

        p[0] = { x: crp[iLen - 2], y: crp[iLen - 1] };

```
      } else if (iLen - 4 == i) {
```

        p[3] = { x: crp[0], y: crp[1] };

```
      } else if (iLen - 2 == i) {
```

        p[2] = { x: crp[0], y: crp[1] };

        p[3] = { x: crp[2], y: crp[3] };

```
      }
```
```
    } else {
```
```
      if (iLen - 4 == i) {
```
```
        p[3] = p[2];
```
```
      } else if (!i) {
```

        p[0] = { x: crp[i], y: crp[i + 1] };

```
      }
```
```
    }
```
```
    d.push([
```
```
      'C',
```

      (-p[0].x + 6 * p[1].x + p[2].x) / 6,

      (-p[0].y + 6 * p[1].y + p[2].y) / 6,

      (p[1].x + 6 * p[2].x - p[3].x) / 6,

      (p[1].y + 6 * p[2].y - p[3].y) / 6,

```
      p[2].x,
```
```
      p[2].y
```
```
    ]);
```
```
  }
```
```
 
```
```
  // really for demo purposes:
```
```
 
```

  // draw a tiny rect if less than 2 points

```
  console.log(d.length);
```
```
  if (d.length < 2) {
```
```
    const x = crp[0];
```
```
    const y = crp[1];
```

    return `M ${x} ${y} h 1 v 1 h -1 v-1`;

```
 
```
```
    // draw a line if 2 points
```
```
  } else if (d.length === 2) {
```

    return `M ${crp[0]} ${crp[1]} L ` + crp.flat().join` `;

```
  }
```

  // draw curves if 3 or more (raphael only ever did this, other numbers of points

```
  // were considered invalid)
```

  return  `M ${crp[0]} ${crp[1]}` + d.flat().join` `;

```
}
```
```
 
```
```
// try it out:
```
```
 
```

const pathCommands = catmullRom2bezier([

  100, 100, 200, 100, 200, 300, 170, 150, 120, 180, 120, 120

```
  ], true)
```
```
 
```
```
const svg = `
```
```
  click 3 or more times anywhere<br>
```
```
  <button>clear</button>
```
```
  <svg>
```

    <path d="M 100 100 ${pathCommands}" stroke="blue" fill="none" />

```
  </svg>
```
```
  <style>
```
```
  svg {
```
```
    position:absolute;
```
```
    left:0;top:0;
```
```
    overflow:visible;
```
```
    pointer-events:none;
```
```
  }
```
```
  </style>
```
```
`;
```
```
 
```
```
const div = document.body.appendChild(
```
```
  document.createElement('div')
```
```
);
```
```
div.innerHTML = svg;
```
```
const path = div.querySelector('path')
```
```
 
```
```
let pnts = [];
```
```
 
```
```
function isButton(e) {
```
```
  if (e.target.tagName === 'BUTTON') {
```
```
    pnts = []
```

    path.setAttribute('d', 'M 0 0L0 0');

```
    return true;
```
```
  }
```
```
}
```
```
 
```

document.addEventListener('click', e => {

```
  if (isButton(e)) return;
```
```
  pnts.push(e.clientX, e.clientY);
```

  path.setAttribute('d', catmullRom2bezier(pnts, true))

```
});
```
```
 
```

document.addEventListener('touchend', e => {

```
  if (isButton(e)) return;
```

  pnts.push(e.touchs[0].clientX, e.touchs[0].e.clientY);

  path.setAttribute('d', catmullRom2bezier(pnts, true))

```
});
```

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

Distance Between Two Points (SVG)

```
const dist = (x1, y1, x2, y2) => 
```
```
  Math.sqrt(
```
```
    (x1 - x2) ** 2 + 
```
```
    (y1 - y2) ** 2);
```
```
 
```
```
const el = document.body.appendChild(
```
```
  document.createElement('div')
```
```
);
```
```
 
```
```
el.innerHTML = `
```
```
  <svg style="overflow:visible;">
```

    <circle id="circA" cx="150" cy="100" r="50" fill="gray" />

    <circle id="circB" cx="150" cy="200" r="50" fill="blue" />

    <text id="text" dy="20" dx="20">move mouse</text>

```
  </svg>
```
```
  <style>
```
```
    body, html, svg {
```
```
      width: 100%;
```
```
      height: 100%;
```
```
    }
```
```
  </style>
```
```
`;
```
```
 
```
```
function touch(e) {
```
```
  const touches = e.touches;
```
```
  let x, y;
```

  if (touches != null && touches.length > 0) {

```
    x = touches[0].clientX;
```
```
    y = touches[0].clientY;
```
```
  } else {
```
```
    x = e.clientX;
```
```
    y = e.clientY;
```
```
  }
```
```
  return { x, y };
```
```
}
```
```
 
```

const hasTouch = navigator.maxTouchPoints > 0;

const move = hasTouch ? 'touchmove' : 'mousemove';

```
document.addEventListener(move, e => {
```
```
  const { x, y } = touch(e);
```
```
 
```
```
  // using global ids :D
```
```
  circB.cx.baseVal.value = x;
```
```
  circB.cy.baseVal.value = y;
```
```
 
```
```
  const distance = dist(
```
```
    circA.cx.baseVal.value, 
```
```
    circA.cy.baseVal.value, x, y
```
```
  );
```

  text.innerHTML = 'move mouse, distance: ' + distance;

```
 
```

  circA.r.baseVal.value = distance - circB.r.baseVal.value;

```
});
```

This snippet shows how to calculate the distance between two points. The dist function uses the pythagorean theorem:

```
const dist = (x1, y1, x2, y2) => 
```
```
  Math.sqrt(
```
```
    (x1 - x2) ** 2 + 
```
```
    (y1 - y2) ** 2);
```

August 29, 2021

// dom // graphics // javascript // math // svg

Line to Line Intersection

// line to line intersection https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection

function lineIntersection(p1, p2, p3, p4) {

```
  let ip = { x: 0, y: 0 };
```

  // rare case where I use `_` in a non-constant variable name

  // to make this easy to read to with the wikipedia info

```
  const x4_x3 = p4.x - p3.x;
```
```
  const y4_y3 = p4.y - p3.y;
```
```
  const x2_x1 = p2.x - p1.x;
```
```
  const y2_y1 = p2.y - p1.y;
```
```
  const x1_x3 = p1.x - p3.x;
```
```
  const y1_y3 = p1.y - p3.y;
```
```
  let nx, ny, dn;
```
```
 
```
```
  nx = x4_x3 * y1_y3 - y4_y3 * x1_x3;
```
```
  ny = x2_x1 * y1_y3 - y2_y1 * x1_x3;
```
```
  dn = y4_y3 * x2_x1 - x4_x3 * y2_y1;
```
```
 
```
```
  nx /= dn;
```
```
  ny /= dn;
```
```
 
```
```
  // has intersection
```

  if (nx >= 0 && nx <= 1 && ny >= 0 && ny <= 1) {

```
    ny = p1.y + nx * y2_y1;
```
```
    nx = p1.x + nx * x2_x1;
```
```
    ip.x = nx;
```
```
    ip.y = ny;
```
```
  } else {
```
```
    // no intersection
```
```
    ip = null;
```
```
  }
```
```
  return ip;
```
```
}
```
```
 
```
```
const el = document.body.appendChild(
```
```
  document.createElement('div'));
```
```
 
```

// hard coding line values for simplicity and ease of understanding

```
el.innerHTML = `
```

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

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

    <rect id="intersecton" x="0" y="0" width="10" height="10" fill="red" />

```
  </svg>
```
```
  <style>
```
```
    svg, div, body, html {
```
```
      overflow: visible; 
```
```
      height: 100%; 
```
```
      width: 100%;
```
```
      margin: 0; padding: 0;
```
```
    }
```
```
  </style>
```
```
`;
```
```
 
```
```
const loc = lineIntersection(
```
```
  {x: 10, y: 10}, {x: 300, y:300},
```
```
  {x: 100, y: 10}, {x: 160, y:320}
```
```
);
```
```
 
```

// subtract half the size of the rect from both axis to center it

intersecton.x.baseVal.value = loc.x - 5;

```
 
```

// @NOTE: using the `id` global `window.intersection`

// is just good for demos - little risky for real stuff

// since it lends itself to easy collision

window.intersecton.y.baseVal.value = loc.y - 5;

Line to line intersection rendered with SVG.

August 20, 2021

// graphics // javascript // math // matrix // svg // tricks

SVG Relative Touch/Mouse Events

```
const hasTouch =
```

  navigator.maxTouchPoints != null && navigator.maxTouchPoints > 0;

```
 
```

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

```
 
```
```
el.innerHTML = `
```

  <svg id="mainSvg" width="100%" height="100%" viewBox="0 0 800 800">

    <g transform="translate(100, 100) scale(0.8, 0.8) rotate(25, 400, 400)">

      <rect x="0" y="0" width="800" height="800" fill="#ccc" stroke="none"/>

      <text x="10" y="30" font-size="30px">click/tap the box</text>

```
    </g>
```
```
  </svg>
```
```
  <style>
```
```
    svg, div, body, html {
```
```
      height: 100%;
```
```
      width: 100%;
```
```
      margin: 0; padding: 0;
```
```
    }
```
```
 
```
```
    svg {
```
```
      overflow: hidden;
```
```
    }
```
```
  </style>
```
```
`;
```
```
function createSvg(type) {
```

  return document.createElementNS('http://www.w3.org/2000/svg', type);

```
}
```
```
 
```

// mouse or touch location is always relative to the svg

// any css transformations on the svg are only accounted for in

```
// Chrome unfortunately
```
```
function svgTouch(e, svgEl) {
```
```
  const touches = e.touches;
```
```
  let locX, locY;
```

  if (touches != null && touches.length > 0) {

```
    locX = touches[0].clientX;
```
```
    locY = touches[0].clientY;
```
```
  } else {
```
```
    locX = e.clientX;
```
```
    locY = e.clientY;
```
```
  }
```
```
 
```
```
  const pt = svgEl.createSVGPoint();
```
```
  pt.x = locX;
```
```
  pt.y = locY;
```
```
 
```

  const newPnt = pt.matrixTransform(svgEl.getScreenCTM().inverse());

  return { locX: newPnt.x, locY: newPnt.y };

```
}
```
```
 
```

document.addEventListener(hasTouch ? 'touchstart' : 'mousedown', e => {

```
  // global id `mainSvg` :P
```

  const { locX, locY } = svgTouch(e, mainSvg);

```
 
```
```
  const circle = createSvg('circle');
```
```
  circle.cx.baseVal.value = locX;
```
```
  circle.cy.baseVal.value = locY;
```
```
  circle.r.baseVal.value = 20;
```
```
  circle.style.fill = 'blue';
```
```
 
```
```
  mainSvg.appendChild(circle);
```
```
});
```

This snippet shows how to get relative mouse/touch coordinates within an SVG element. The main trick here is on line 50… pt.matrixTransform(svgEl.getScreenCTM().inverse()); – we get the inverse transformation matrix of the “mainSvg” node and transform the mouse/touch coordinates by it.

Beware, when this was posted, as noted in the comments – CSS transforms on the SVG element or any of its parents won’t be accounted for in the `getScreenCTM` call in any browsers other than Chrome. There is an open Firefox issue for this I believe…

August 14, 2021

// dom // graphics // javascript // math // matrix // svg // tricks

Rectangle Path with SVG

```
const rectPath = rect =>
```
```
  `M ${rect.left} ${rect.top}
```
```
  L ${rect.right} ${rect.top}
```
```
    ${rect.right} ${rect.bottom}
```
```
    ${rect.left} ${rect.bottom}
```
```
    ${rect.left} ${rect.top} `;
```
```
 
```
```
const el = document.body.appendChild(
```
```
  document.createElement('div'));
```
```
 
```
```
el.innerHTML = `
```

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

```
    <path d="
```

    ${rectPath({left: 20, top: 10, right: 100, bottom: 100})}

    ${rectPath({left: 50, top: 50, right: 200, bottom: 200})}

    ${rectPath({left: 150, top: 20, right: 250, bottom: 100})}

    ${rectPath({left: 150, top: 120, right: 250, bottom: 230})}

    " stroke="black" fill="red" fill-rule="evenodd" vector-effect="non-scaling-stroke"/>

```
 
```
```
    <path d="
```

    ${rectPath({left: 10, top: 220, right: 100, bottom: 300})}

    ${rectPath({left: 20, top: 250, right: 150, bottom: 350})}

    " stroke="white" fill="#64a7ff" fill-rule="nonzero" vector-effect="non-scaling-stroke"/>

```
 
```
```
    <path d="
```

    ${rectPath({left: 350, top: 10, right: 450, bottom: 150})}

```
    " fill="#2e9997" />
```
```
  </svg>
```
```
  <style>
```
```
    svg, div, body, html {
```
```
      overflow: visible; 
```
```
      height: 100%; 
```
```
      width: 100%;
```
```
      margin: 0; padding: 0;
```
```
    }
```
```
  </style>
```
```
`;
```

In this snippet rectPath creates a rectangle with “move to” and “line to” commands to be used in conjunction with SVG paths.

August 9, 2021

// javascript // paths // svg

Older Posts

Newer Posts

Catmull Rom to Bezier SVG

Distance Between Two Points (SVG)

Line to Line Intersection

SVG Relative Touch/Mouse Events

Rectangle Path with SVG

Recent

Archive