esvit/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .ui-tvnoisecanvas {
      height: 100%;
      left: 0;
      margin: 0;
      position: absolute;
      top: 0;
      width: 100%;
      -webkit-filter: blur(4px);
      filter: blur(4px)
    }
  </style>
</head>
<body>

<canvas id="test" class="ui-tvnoisecanvas" width="160" height="90"></canvas>

<script>
  class Frame {
    constructor (canvas) {
      this.canvasElement = canvas;
      this.canvasWidth = 160;
      this.canvasHeight = 90;
      this.interferenceHeight = 50;
      this.lastFrameUpdate = 0;
      this.frameInterval = 60;
      this.useAnimationFrame = !!window.requestAnimationFrame
    }

    start (canvas) {
      this.canvasContext = this.canvasElement.getContext("2d");
      this.noiseAnimationWindowPos = -this.canvasHeight;
      this.lastFrameUpdate = 0;
      this.canvasElement.width = this.canvasWidth;
      this.canvasElement.height = this.canvasHeight;
      this.renderFrame();
    }

    stop () {
      this.useAnimationFrame ?
        cancelAnimationFrame(this.frameUpdateHandlerId) :
        clearTimeout(this.frameUpdateHandlerId)
    }

    renderFrame () {
      if (this.lastFrameUpdate + this.frameInterval > (new Date).getTime()) {
        this.scheduleNextRender();
      } else {
        let cWidth = this.canvasWidth;
        let cHeight = this.canvasHeight;
        let imageData = this.canvasContext.createImageData(cWidth, cHeight);

        for (var i = 0; i < cHeight; i++) {
          for (var s = 0; s < cWidth; s++) {
            let t = cWidth * i * 4 + 4 * s;

            imageData.data[t] = 255 * Math.random();
            if (i < this.noiseAnimationWindowPos || i > this.noiseAnimationWindowPos + this.interferenceHeight) {
              imageData.data[t] *= .85;
            }
            imageData.data[1 + t] = imageData.data[t];
            imageData.data[2 + t] = imageData.data[t];
            imageData.data[3 + t] = 50;
          }
        }
        this.canvasContext.putImageData(imageData, 0, 0);
        this.lastFrameUpdate = (new Date).getTime();
        this.noiseAnimationWindowPos += 7;
        this.noiseAnimationWindowPos > cHeight && (this.noiseAnimationWindowPos = -cHeight);
        this.scheduleNextRender();
      }
    }

    scheduleNextRender () {
      this.useAnimationFrame ?
        this.frameUpdateHandlerId = window.requestAnimationFrame(this.renderFrame.bind(this)) :
        this.frameUpdateHandlerId = setTimeout(this.renderFrame.bind(this), this.frameInterval);
    }
  }

  var f = new Frame(document.getElementById('test'))

  f.start();
</script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	.ui-tvnoisecanvas {
	height: 100%;
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
	width: 100%;
	-webkit-filter: blur(4px);
	filter: blur(4px)
	}
	</style>
	</head>
	<body>

	<canvas id="test" class="ui-tvnoisecanvas" width="160" height="90"></canvas>

	<script>
	class Frame {
	constructor (canvas) {
	this.canvasElement = canvas;
	this.canvasWidth = 160;
	this.canvasHeight = 90;
	this.interferenceHeight = 50;
	this.lastFrameUpdate = 0;
	this.frameInterval = 60;
	this.useAnimationFrame = !!window.requestAnimationFrame
	}

	start (canvas) {
	this.canvasContext = this.canvasElement.getContext("2d");
	this.noiseAnimationWindowPos = -this.canvasHeight;
	this.lastFrameUpdate = 0;
	this.canvasElement.width = this.canvasWidth;
	this.canvasElement.height = this.canvasHeight;
	this.renderFrame();
	}

	stop () {
	this.useAnimationFrame ?
	cancelAnimationFrame(this.frameUpdateHandlerId) :
	clearTimeout(this.frameUpdateHandlerId)
	}

	renderFrame () {
	if (this.lastFrameUpdate + this.frameInterval > (new Date).getTime()) {
	this.scheduleNextRender();
	} else {
	let cWidth = this.canvasWidth;
	let cHeight = this.canvasHeight;
	let imageData = this.canvasContext.createImageData(cWidth, cHeight);

	for (var i = 0; i < cHeight; i++) {
	for (var s = 0; s < cWidth; s++) {
	let t = cWidth * i * 4 + 4 * s;

	imageData.data[t] = 255 * Math.random();
	if (i < this.noiseAnimationWindowPos \|\| i > this.noiseAnimationWindowPos + this.interferenceHeight) {
	imageData.data[t] *= .85;
	}
	imageData.data[1 + t] = imageData.data[t];
	imageData.data[2 + t] = imageData.data[t];
	imageData.data[3 + t] = 50;
	}
	}
	this.canvasContext.putImageData(imageData, 0, 0);
	this.lastFrameUpdate = (new Date).getTime();
	this.noiseAnimationWindowPos += 7;
	this.noiseAnimationWindowPos > cHeight && (this.noiseAnimationWindowPos = -cHeight);
	this.scheduleNextRender();
	}
	}

	scheduleNextRender () {
	this.useAnimationFrame ?
	this.frameUpdateHandlerId = window.requestAnimationFrame(this.renderFrame.bind(this)) :
	this.frameUpdateHandlerId = setTimeout(this.renderFrame.bind(this), this.frameInterval);
	}
	}

	var f = new Frame(document.getElementById('test'))

	f.start();
	</script>
	</body>
	</html>