document.body.innerHTML = `

  <p>Click/tap the radio button:</p>

  <input type="radio" style="transform:translate(20px, 30px) scale(4);background:red">

`;

const canvas = document.createElement('canvas');

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

const brush = document.createElement('canvas');

const brushC = brush.getContext('2d');

canvas.width = innerWidth;

canvas.height = innerHeight;

brush.width = innerWidth;

brush.height = innerHeight;

document.body.appendChild(canvas);

c.fillStyle = 'black'

c.fillRect(0, 0, canvas.width, canvas.height);

let brushSize = 50;

let featherSize = .1;

let featherSteps = Math.floor(brushSize * featherSize) + 1;

let st = brushSize - featherSteps;

let a = 0;

if (st < 1) st = 1;

for (let i = 0; i < st; i++) {

  a = 1 / (st - i)

  c.strokeStyle = `rgba(255, 255, 255, ${a})`;

  console.log(c.strokeStyle)

  c.lineWidth = brushSize - i;

  c.lineJoin = 'round'

  c.lineCap = 'round'

  c.beginPath();

  c.moveTo(50, 50);

  c.lineTo(200, 200);

  c.bezierCurveTo(300, 200, 400, 200, 300, 400);

  c.stroke();

}

vow = 'aeiou'.split``

con = 'bcdfghjklmnpqrstvwxyz'.split``

R = _ => Math.random()

r = a => a[~~(R() * a.length)]

part = _ => r(con) + r(vow) + (

  R() < .5 ? r(vow) : ''

)

wrd = _ => {

  n = ~~(R() * 3) + 1

  s = ''

  for (i = n; i--;) 

    s += part()

  return s + ' '

}

for(k = 30; k--;) 

  document.body.innerHTML += wrd()

l=[]

for(i=26;i--;)l[i]=(10+i).toString(36)

console.log(l)

let letters = 'abcdefghijklmopqrstuvwxyz'.split``

let anchors

let idx

let leng = 10

let size = 200

let px = 0

let py = 0

function seed() {

  idx = 0

  anchors = (Date.now() + '').split``

    .reverse()

    .map(v => parseFloat(v) / 10)

    .splice(0, leng)

}

let last = 0

let zoom = 1

function rand() {

  if (idx > size * size) seed()

  px += zoom

  py += ~~(px / size)

  if (px >= size) px = 0

  if (py >= size) py = 0

  const point = {

    x: anchors[idx % leng],

    y: anchors[(idx + 1) % leng]

  }

  idx++

  let dists = []

  for (let i = 0; i < anchors.length; i += 2) {

    let dx = px - anchors[i] * size

    let dy = py - anchors[i + 1] * size

    dists.push(Math.sqrt(dx * dx + dy * dy))

  }

  dists.sort()

  last += (dists[0] / size - last) / 4

  return last

}

seed()

let d = document

let b = d.body

with (b.appendChild(

  Object.assign(d.createElement`canvas`, { width: 400, height: 400 })

).getContext`2d`) {

  fillStyle = 'black'

  fillRect(0, 0, 400, 400)

  for (let i = 0; i < 200; i++) {

    for (let j = 0; j < 200; j++) {

      const c = rand() * 255

      fillStyle = `rgb(${c}, ${c}, ${c})`

      fillRect(j * 2, i * 2, 1, 2)

    }

  }

}