const uploadInput = document.body.appendChild(

  Object.assign(document.createElement('input'), {

    type: 'file',

    accept: 'image/png, image/jpeg'

  })

)

uploadInput.style.display = 'block'

const canvas = document.body.appendChild(document.createElement('canvas'))

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

canvas.style.width = '70%'

let sampleSize

const steps = 100

const step = (Math.PI * 2) / steps

let interval

const ring = () => {

  clearInterval(interval)

  let x = imageEl.width / 2,

    y = imageEl.height / 2,

    rad = imageEl.width * 0.3,

    theta = 0,

    px,

    py,

    pxs = [],

    spy = []

  ;(pys = []), (im = []), (rects = [])

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

    px = x + rad * Math.cos(theta)

    py = y + (rad / 2) * Math.sin(theta)

    theta += step

    pxs[i] = px

    pys[i] = spy[i] = py

    im[i] = c.getImageData(px, py, sampleSize, sampleSize)

    rects[i] = [px, py, sampleSize, sampleSize]

  }

  interval = setInterval(() => {

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

      pys[i] -= 1

      c.putImageData(im[i], pxs[i], pys[i])

      v = (y - spy[i]) / rad

      c.fillStyle = 'rgba(0,0,0,' + v + ')'

      c.fillRect(pxs[i] - 1, pys[i], sampleSize + 2, sampleSize - 1)

    }

  }, 16)

}

const imageEl = new Image()

imageEl.src = 'https://snippet.zone/wp-content/uploads/2022/01/taho-scaled.jpg'

imageEl.onload = () => {

  canvas.width = imageEl.width

  canvas.height = imageEl.height

  c.drawImage(imageEl, 0, 0)

  sampleSize = imageEl.width / 25

  ring()

}

const reader = new FileReader()

reader.addEventListener('load', () => {

  imageEl.src = reader.result

})

uploadInput.addEventListener('change', e => {

  const file = e.target.files[0]

  if (file != null) {

    reader.readAsDataURL(file)

  }

})