const canvas = document.body.appendChild(

  document.createElement('canvas')

);

const width = 200;

canvas.width = canvas.height = width;

const c = canvas.getContext('2d');

const pixels = c.createImageData(canvas.width, canvas.height);

const size = canvas.width * canvas.height;

let index = 0, x, y;

for (var i = 0; i < size; i++){

  x = i % width;

  y = Math.floor(i / width);

  pixels.data[index++] = x;

  pixels.data[index++] = y;

  pixels.data[index++] = width - x;

  pixels.data[index++] = 255;

}

c.putImageData(pixels, 0, 0);

x=''+self 

j=''

'd1d7a1712345691a7512d427b1da7d9ab7519a4b721a961721d694'

.split``

.map(_=>j+=`x[0x${_}]+`)

console.log(eval(j+'""'))

x=''+self 

// becomes "[object Window]"

j='' 

// initialize `j` which will be javascript to pass to `eval`

'd1d7a17123456...' 

// this is a list of index values to 

// look up in `x` in hexidecimal so that each 

// index is a single character

.split``

// split the index values into an array `[0xe, 0x2 ...`

.map(_=>j+=`x[0x${_}]+`)

// map over the index values and write a string like

// this `x[0xe]+x[0x2]+...` into `j`

console.log(eval(j+'""'))

// evaluate `j` with an empty string at the end

// `x[0xe]+x[0x2]+""` and log it out

document.body.innerHTML += 'click anywhere...'

onclick = () =>

  document.body.style.background = 

    `#${Math.random().toString(16).substr(-6)}`

Math.random() // random number between 0 and 1

.toString(16) // convert to hex string (something like "0.2d6bcee4198d4")

.substr(-6) // grab the last 6 characters

const instructionsEl = document.createElement('p');

instructionsEl.innerHTML = 'click anywhere...';

document.body.appendChild(instructionsEl);

const randomHexColor = () => 

  `#${Math.random().toString(16).substr(-6)}`;

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

  document.body.style.background = randomHexColor();

});