JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>Mandelbrot WebGL</title>
    <style>
        body, canvas {
            margin: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>

    <script src="https://www.khronos.org/registry/webgl/sdk/demos/common/webgl-utils.js"></script>
    <script src="https://www.khronos.org/registry/webgl/sdk/demos/webkit/resources/J3DI.js"> </script>
    <script src="https://www.khronos.org/registry/webgl/sdk/demos/webkit/resources/J3DIMath.js"></script>

    <script id="vshader" type="x-shader/x-vertex">
        uniform mat4 projection_matrix;
        attribute vec4 position;
        varying vec2 fractal_position;

        void main() {
            gl_Position = projection_matrix * position;
            fractal_position = vec2(-position.y, position.x);
            fractal_position -= vec2(0.50, 0);
            fractal_position *= 1.5;
        }
    </script>

    <script id="fshader" type="x-shader/x-fragment">
        precision highp float;

        uniform float time;
        varying vec2 fractal_position;

        const vec4 K = vec4(1.0, 0.66, 0.33, 3.0);
        
        vec4 hsv_to_rgb(float hue, float saturation, float value) {
          vec4 p = abs(fract(vec4(hue) + K) * 6.0 - K.wwww);
          return vec4(value * mix(K.xxx, clamp(p.xyz - K.xxx, 0.0, 1.0), saturation), 1.0);
        }

        vec4 i_to_rgb(int i) {
          float hue = float(i) / 100.0 + sin(time);
          return hsv_to_rgb(hue, 0.5, 0.8);
        }

        vec2 pow_2_complex(vec2 c) {
          //return vec2(c.x*c.x - c.y*c.y, sin(time) * 2.0 * c.x * c.y);
          return vec2(c.x*c.x - c.y*c.y, 2.0 * c.x * c.y);
        }

        vec2 mandelbrot(vec2 c, vec2 c0) {
          return pow_2_complex(c) + c0;
        }

        vec4 iterate_pixel(vec2 position) {
          vec2 c = vec2(0);
          for (int i=0; i < 100; i++) {
            if (c.x*c.x + c.y*c.y > 2.0*2.0) {
              return i_to_rgb(i);
          ...