svg анимация танцующий луч

by Denis Tverdokhlebov

HTML

<canvas></canvas>
<script id="sv" type="x-shader/x-vertex">
        attribute vec4 vPosition;
        void main (void) {
            gl_Position = vPosition;
        }
    </script>

<script id="sf" type="x-shader/x-fragment">
        precision mediump float;

        uniform float time;
        uniform vec2 resolution;

        void main(void) {
            vec2 q = gl_FragCoord.xy / resolution.xy;
            vec2 p = -1.0 + 2.0 * q;
            p.x *= resolution.x / resolution.y;

            float v = p.x + cos(time + p.y);
            vec3 col = vec3(0.1 * max(0.0, p.y), 0.1 * max(0.0, p.x), 0.2 * max(0.0, p.x)) / abs(v * 2.0);
            gl_FragColor = vec4(col, 1.0);
        }
</script>

CSS

* {
  margin: 0;
  padding: 0;
}

JavaScript

var canvas = document.querySelector('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var ut, st = Date.now();

    function initShaders (gl, vertexShaderId, fragmentShaderId) {
        var vertexEl = document.querySelector(vertexShaderId);
        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexEl.text);
        gl.compileShader(vertexShader);

        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS) ) {
            debugger
        }

        var fragmentEl = document.querySelector(fragmentShaderId);
        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentEl.text);
        gl.compileShader(fragmentShader);

        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
            debugger
        }

        var program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        return program;
    }

    function initGraphics () {
        gl = canvas.getContext('webgl');
        var width = canvas.width;
        var height = canvas.height;
        gl.viewport(0, 0, width, height);

        var program = initShaders(gl, '#sv', '#sf');
        var buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

        gl.bufferData(
                gl.ARRAY_BUFFER,
                new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),
                gl.STATIC_DRAW
        );

        var vPosition = gl.getAttribLocation(program, 'vPosition');
        gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(vPosition);

        ut = gl.getUniformLocation(program, 'time');
        var resolution = new Float32Array([canvas.width, canvas.height]);
        gl.uniform2fv(gl.getUniformLocation(program, 'resolution'),...