Snippet Zone

2x mod 1 Map

```
function twoXmodMap(start = 0.2) {
```

  const seed = () => Math.random() * Math.random() * start

```
  let xn = seed()
```
```
  let xn1
```
```
  let iter = 0
```
```
  return () => {
```
```
    iter++
```
```
    if (iter > 50) {
```
```
      xn = seed()
```
```
      iter = 0
```
```
    }
```
```
 
```
```
    // this is the key part:
```
```
    xn1 = (2 * xn) % 1
```
```
    xn = xn1
```
```
 
```
```
    return xn1
```
```
  }
```
```
}
```
```
 
```

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

```
el.innerHTML = `
```
```
  <svg>
```

    <path d="M 0 0 L 1 1" fill="none" stroke="red" />

```
  </svg>
```
```
  <style>
```
```
    svg, body, html {
```
```
      width: 100%;
```
```
      height: 100%;
```
```
      overflow: visible;
```
```
    }
```
```
  </style>
```
```
`
```
```
 
```
```
const path = el.querySelector('path')
```
```
let pathStr = ''
```
```
 
```
```
const map = twoXmodMap()
```
```
 
```
```
let x = 0
```
```
let yo = 0
```
```
let y;
```
```
function loop() {
```
```
  y = map()
```
```
  x += 2
```
```
 
```
```
  if (pathStr == '' || x > 300) {
```
```
    x = 10
```
```
    yo += 50
```
```
    pathStr += `M 10 ${yo}`
```
```
  } else {
```

    pathStr += ` L ${x} ${yo + y * 30} `

```
  }
```
```
 
```
```
  path.setAttribute('d', pathStr)
```
```
  window.requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Drawing the 2x mod 1 map.

October 28, 2021

// javascript // math // svg

SVG getScreenCTM

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

<svg width="200" height="200" viewBox="0 0 200 200">

```
  <rect 
```
```
    class="rect"
```

    transform="translate(50, 50) scale(1.2) rotate(25)"

```
    fill="purple"
```

    x="0" y="0" width="50" height="50" />

```
</svg>
```
```
`;
```
```
 
```
```
const box = document.body.appendChild(
```
```
  document.createElement`div`
```
```
);
```
```
 
```
```
Object.assign(box.style, {
```
```
  position: 'absolute',
```
```
  left: 0, top: 0,
```
```
  width: '50px',
```
```
  height: '50px',
```
```
  transformOrigin: '0 0',
```
```
  outline: '5px solid red'
```
```
});
```
```
 
```

const rect = document.querySelector('.rect');

const {a, b, c, d, e, f} = rect.getScreenCTM()

```
 
```
```
box.style.transform = `
```
```
  matrix(${[a, b, c, d, e, f]})
```
```
`;
```

The transformation matrix of an SVG element can be obtained using getScreenCTM or getCTM. The latter of which will be relative to the SVG coordinate space, vs the coordinate space of the page.

Here we take the matrix data from getScreenCTM and use it on a div to place a border over an SVG rect node. This is great for layering HTML on top of SVG.

October 19, 2021

// dom // javascript // math // matrix // svg // tricks // ui

SVG Drawing Program

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
  <head>
```
```
    <meta charset="UTF-8">
```

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

```
 
```
```
    <title>Drawing</title>
```
```
    <style>
```
```
      body,
```
```
      html {
```
```
        user-select: none;
```
```
        height: 100%;
```
```
        margin: 0;
```
```
        font-family: sans-serif;
```
```
        background: white;
```
```
      }
```
```
 
```
```
      body {
```
```
        position: fixed;
```
```
        top: 0;
```
```
      }
```
```
 
```
```
      .ui {
```
```
        position: fixed;
```
```
        display: flex;
```
```
        bottom: 0;
```
```
        width: 100%;
```
```
        margin-bottom: .2em;
```
```
      }
```
```
 
```
```
      .ui .tool {
```
```
        font-size: 2em;
```
```
        flex: 1;
```
```
        text-align: center;
```
```
      }
```
```
 
```
```
      .tool span {
```
```
        cursor: pointer;
```
```
        display: inline-block;
```
```
        transform: scale(0.7);
```

        transition: transform 250ms ease-out;

```
      }
```
```
 
```
```
      .tool span.selected {
```
```
        transform: scale(1);
```
```
      }
```
```
 
```
```
      svg {
```
```
        overflow: visible;
```
```
        height: 100%;
```
```
        width: 100%;
```
```
        margin: 0;
```
```
        padding: 0;
```
```
      }
```
```
 
```
```
      input[type=color] {
```
```
        position: absolute;
```
```
        left: 0;
```
```
        top: 0;
```
```
        height: 100%;
```
```
        opacity: 0;
```
```
        cursor: pointer;
```
```
      }
```
```
 
```
```
      .message {
```
```
        position: fixed;
```
```
        left: 0;
```
```
        top: 0;
```
```
        padding: 1em;
```
```
        width: 100%;
```
```
        text-align: center;
```
```
        font-size: 1.2em;
```

        transition: opacity 250ms ease-out;

```
        pointer-events: none;
```
```
      }
```
```
 
```
```
      .message.hide {
```
```
        opacity: 0;
```
```
      }
```
```
    </style>
```
```
  </head>
```
```
  <body>
```
```
 
```

    <svg class="paper" width="100%" height="100%">

```
      <style>
```
```
        path {
```
```
          stroke-linecap: round;
```
```
          stroke-linejoin: round;
```
```
          fill: none;
```
```
        }
```
```
      </style>
```
```
    </svg>
```
```
    <div class="ui">
```

      <div class="tool"><span class="pencil" class="pencil icon selected">&#9999;&#65039;</span></div>

      <div class="tool"><span class="brush icon">&#128396;&#65039;</span></div>

      <div class="tool"><span class="colors icon">&#x1f3a8;

        <input class="color" type="color"></span></div>

```
    </div>
```
```
    <div class="message">
```
```
      click/tap and drag to draw
```
```
    </div>
```
```
 
```
```
    <script>
```
```
      (() => { 
```
```
        // no scrolling on mobile
```

        document.addEventListener('touchmove', e => e.preventDefault(), {

```
          passive: false
```
```
        });
```
```
 
```
```
        function touchify(e) {
```
```
          const touch = [];
```
```
          touch.x = touch.y = 0;
```
```
 
```

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

            touch.x = e.touches[0].clientX;

            touch.y = e.touches[0].clientY;

            for (let i = 0; i < e.touches.length; i++) {

```
              touch[i] = e.touches[i];
```
```
            }
```
```
          } else {
```
```
            touch.x = e.clientX;
```
```
            touch.y = e.clientY;
```

            touch[0] = { clientX: e.clientX, clientY: e.clientY };

```
          }
```
```
          return touch;
```
```
        }
```
```
 
```
```
        const els = {};
```
```
 
```

        [...document.querySelectorAll('[class]')].forEach(el => {

```
          els[el.classList[0]] = el;
```
```
        });
```
```
 
```

        const { paper, pencil, color, brush, message } = els;

```
 
```
```
        let lastSelected = pencil;
```
```
        let strokeWidth = 1;
```
```
        let downCount;
```
```
        let down;
```
```
        let currPath;
```
```
        let pathPoints;
```
```
 
```
```
        const onDown = e => {
```
```
          down = true;
```
```
          downCount = 0;
```
```
          pathPoints = [];
```
```
        };
```
```
 
```
```
        const onMove = e => {
```
```
          const touch = touchify(e);
```
```
 
```
```
          if (down) {
```
```
            downCount++;
```
```
 
```
```
            if (downCount === 1) {
```

              currPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');

              currPath.setAttribute('stroke', color.value);

              currPath.setAttribute('stroke-width', strokeWidth);

              currPath.setAttribute('d', `M ${touch.x} ${touch.y}`);

              pathPoints.push([touch.x, touch.y]);

              paper.appendChild(currPath);

```
            } else {
```

              let path = `M ${pathPoints[0][0]} ${pathPoints[0][1]} L `;

              pathPoints.push([touch.x, touch.y]);

              for (let i = 1; i < pathPoints.length; i++) {

                path += `${pathPoints[i][0]} ${pathPoints[i][1]} `;

```
              }
```

              currPath.setAttribute('d', path);

```
            }
```
```
 
```
```
            if (downCount === 10) {
```

              message.classList.add('hide');

```
            }
```
```
          }
```
```
        };
```
```
 
```
```
        const onUp = e => {
```
```
          down = false;
```
```
        };
```
```
 
```
```
        const onClick = e => {
```

          if (e.target.classList.contains('pencil')) {

```
            strokeWidth = 1;
```

          } else if (e.target.classList.contains('brush')) {

```
            strokeWidth = 10;
```
```
          }
```

          if (e.target.classList.contains('icon')) {

            if (lastSelected) lastSelected.classList.remove('selected');

            e.target.classList.add('selected');

```
            lastSelected = e.target;
```
```
          }
```
```
        };
```
```
 
```

        document.addEventListener('mousedown', onDown);

        document.addEventListener('touchstart', onDown);

```
 
```

        document.addEventListener('mousemove', onMove);

        document.addEventListener('touchmove', onMove);

```
 
```

        document.addEventListener('mouseup', onUp);

        document.addEventListener('touchend', onUp);

```
 
```

        document.addEventListener('click', onClick);

        document.addEventListener('touchend', onClick);

```
      })();
```
```
    </script>
```
```
  </body>
```
```
</html>
```

SVG based drawing program.

October 11, 2021

// css // javascript // svg // ui

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

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

2x mod 1 Map

SVG getScreenCTM

SVG Drawing Program

Animation Along Path SVG

Ellipse Path SVG

Recent

Archive