let pointX = pointY = 0;

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

  pointX = e.clientX;

  pointY = e.clientY;

});

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

  pointX = e.touches[0].clientX

  pointY = e.touches[0].clientY

});

let el = document.body.appendChild(

  document.createElement`div`

);

const size = 20;

const halfSize = size / 2;

Object.assign(el.style, {

  position: 'absolute',

  width: `${size}px`,

  height: `${size}px`,

  background: 'red',

  left: 0, top: 0

})

let x = vx = 0;

const loop = () => { 

  vx = ((pointX - x) * .2 + vx) * .79;

  x += vx;

  el.style.transform = `translate(${x - halfSize}px, 50px)`;

  requestAnimationFrame(loop);

}

loop();

let info = document.body.appendChild(

  document.createElement`div`

);

info.innerHTML = 'move mouse or finger left/right';

let color = 0xFFFF00;

function toHexString(col) { 

  return '#' + ('000000' + col.toString(16)).substr(-6);

}

function onClick() {

  // invert the color

  color ^= 0xFFFFFF;

  document.body.style.background = toHexString(color);

}

onClick();

document.addEventListener('click', onClick);

console.log('try a different initial color');

console.log('click anywhere to invert background...');

const modes = ['walk', 'run', 'hide', 'jump', 'dance'];

const randomMode = modes[Math.floor(modes.length * Math.random())];

console.log(randomMode);

// turn it into a function:

function randomChoice(arr) {

  return arr[Math.floor(arr.length * Math.random())];

}

const colors = ['red', 'green', 'blue', 'black', 'white']  ;

console.log(randomChoice(colors));

console.log(randomChoice(modes));

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();

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;