[html]
<style>

#container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.a-title { font-size: 26px;
  position: absolute;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: conic-gradient(#ed0101, blue);
  pointer-events: none;
  mix-blend-mode: difference;
  filter: drop-shadow(2px 4px 6px black);
  margin-top: -10px;
}
.a-second-title {
  position: absolute;
  margin-top: 40px;
  pointer-events: none;
  -webkit-text-stroke: 1.3px white;
  letter-spacing: 2px;
    font-size: 25px;
  font-weight: 900;
  mix-blend-mode: color-dodge;
}

canvas {
  width: 100%;
  height: 100%;
}

</style>
<script>
'use strict';

const canvas = document.getElementsByTagName('canvas')[0];
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

let config = {
  TEXTURE_DOWNSAMPLE: 1,
  DENSITY_DISSIPATION: 0.98,
  VELOCITY_DISSIPATION: 0.99,
  PRESSURE_DISSIPATION: 0.8,
  PRESSURE_ITERATIONS: 25,
  CURL: 28,
  SPLAT_RADIUS: 0.004 };

let pointers = [];
let splatStack = [];

const { gl, ext } = getWebGLContext(canvas);

function getWebGLContext(canvas) {
  const params = { alpha: false, depth: false, stencil: false, antialias: false };

  let gl = canvas.getContext('webgl2', params);
  const isWebGL2 = !!gl;
  if (!isWebGL2)
  gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params);

  let halfFloat;
  let supportLinearFiltering;
  if (isWebGL2) {
    gl.getExtension('EXT_color_buffer_float');
    supportLinearFiltering = gl.getExtension('OES_texture_float_linear');
  } else {
    halfFloat = gl.getExtension('OES_texture_half_float');
    supportLinearFiltering = gl.getExtension('OES_texture_half_float_linear');
  }

  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;
  let formatRGBA;
  let formatRG;
  let formatR;

  if (isWebGL2)
  {
    formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType);
    formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType);
    formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType);
  } else

  {
    formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
    formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
    formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
  }

  return {
    gl,
    ext: {
      formatRGBA,
      formatRG,
      formatR,
      halfFloatTexType,
      supportLinearFiltering } };

}

function getSupportedFormat(gl, internalFormat, format, type)
{
  if (!supportRenderTextureFormat(gl, internalFormat, format, type))
  {
    switch (internalFormat) {

      case gl.R16F:
        return getSupportedFormat(gl, gl.RG16F, gl.RG, type);
      case gl.RG16F:
        return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type);
      default:
        return null;}

  }

  return {
    internalFormat,
    format };

}

function supportRenderTextureFormat(gl, internalFormat, format, type) {
  let texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null);

  let fbo = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  if (status != gl.FRAMEBUFFER_COMPLETE)
  return false;
  return true;
}

function pointerPrototype() {
  this.id = -1;
  this.x = 0;
  this.y = 0;
  this.dx = 0;
  this.dy = 0;
  this.down = false;
  this.moved = false;
  this.color = [30, 0, 300];
}

pointers.push(new pointerPrototype());

class GLProgram {
  constructor(vertexShader, fragmentShader) {
    this.uniforms = {};
    this.program = gl.createProgram();

    gl.attachShader(this.program, vertexShader);
    gl.attachShader(this.program, fragmentShader);
    gl.linkProgram(this.program);

    if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
    throw gl.getProgramInfoLog(this.program);

    const uniformCount = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);
    for (let i = 0; i < uniformCount; i++) {
      const uniformName = gl.getActiveUniform(this.program, i).name;
      this.uniforms[uniformName] = gl.getUniformLocation(this.program, uniformName);
    }
  }

  bind() {
    gl.useProgram(this.program);
  }}

function compileShader(type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
  throw gl.getShaderInfoLog(shader);

  return shader;
};

const baseVertexShader = compileShader(gl.VERTEX_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    attribute vec2 aPosition;
    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform vec2 texelSize;

    void main () {
        vUv = aPosition * 0.5 + 0.5;
        vL = vUv - vec2(texelSize.x, 0.0);
        vR = vUv + vec2(texelSize.x, 0.0);
        vT = vUv + vec2(0.0, texelSize.y);
        vB = vUv - vec2(0.0, texelSize.y);
        gl_Position = vec4(aPosition, 0.0, 1.0);
    }
`);

const clearShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uTexture;
    uniform float value;

    void main () {
        gl_FragColor = value * texture2D(uTexture, vUv);
    }
`);

const displayShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uTexture;

    void main () {
        gl_FragColor = texture2D(uTexture, vUv);
    }
`);

const splatShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uTarget;
    uniform float aspectRatio;
    uniform vec3 color;
    uniform vec2 point;
    uniform float radius;

    void main () {
        vec2 p = vUv - point.xy;
        p.x *= aspectRatio;
        vec3 splat = exp(-dot(p, p) / radius) * color;
        vec3 base = texture2D(uTarget, vUv).xyz;
        gl_FragColor = vec4(base + splat, 1.0);
    }
`);

const advectionManualFilteringShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uVelocity;
    uniform sampler2D uSource;
    uniform vec2 texelSize;
    uniform float dt;
    uniform float dissipation;

    vec4 bilerp (in sampler2D sam, in vec2 p) {
        vec4 st;
        st.xy = floor(p - 0.5) + 0.5;
        st.zw = st.xy + 1.0;
        vec4 uv = st * texelSize.xyxy;
        vec4 a = texture2D(sam, uv.xy);
        vec4 b = texture2D(sam, uv.zy);
        vec4 c = texture2D(sam, uv.xw);
        vec4 d = texture2D(sam, uv.zw);
        vec2 f = p - st.xy;
        return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
    }

    void main () {
        vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy;
        gl_FragColor = dissipation * bilerp(uSource, coord);
        gl_FragColor.a = 1.0;
    }
`);

const advectionShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uVelocity;
    uniform sampler2D uSource;
    uniform vec2 texelSize;
    uniform float dt;
    uniform float dissipation;

    void main () {
        vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
        gl_FragColor = dissipation * texture2D(uSource, coord);
        gl_FragColor.a = 1.0;
    }
`);

const divergenceShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uVelocity;

    vec2 sampleVelocity (in vec2 uv) {
        vec2 multiplier = vec2(1.0, 1.0);
        if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; }
        if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; }
        if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; }
        if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; }
        return multiplier * texture2D(uVelocity, uv).xy;
    }

    void main () {
        float L = sampleVelocity(vL).x;
        float R = sampleVelocity(vR).x;
        float T = sampleVelocity(vT).y;
        float B = sampleVelocity(vB).y;
        float div = 0.5 * (R - L + T - B);
        gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
    }
`);

const curlShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uVelocity;

    void main () {
        float L = texture2D(uVelocity, vL).y;
        float R = texture2D(uVelocity, vR).y;
        float T = texture2D(uVelocity, vT).x;
        float B = texture2D(uVelocity, vB).x;
        float vorticity = R - L - T + B;
        gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0);
    }
`);

const vorticityShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uVelocity;
    uniform sampler2D uCurl;
    uniform float curl;
    uniform float dt;

    void main () {
        float T = texture2D(uCurl, vT).x;
        float B = texture2D(uCurl, vB).x;
        float C = texture2D(uCurl, vUv).x;
        vec2 force = vec2(abs(T) - abs(B), 0.0);
        force *= 1.0 / length(force + 0.00001) * curl * C;
        vec2 vel = texture2D(uVelocity, vUv).xy;
        gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);
    }
`);

const pressureShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uPressure;
    uniform sampler2D uDivergence;

    vec2 boundary (in vec2 uv) {
        uv = min(max(uv, 0.0), 1.0);
        return uv;
    }

    void main () {
        float L = texture2D(uPressure, boundary(vL)).x;
        float R = texture2D(uPressure, boundary(vR)).x;
        float T = texture2D(uPressure, boundary(vT)).x;
        float B = texture2D(uPressure, boundary(vB)).x;
        float C = texture2D(uPressure, vUv).x;
        float divergence = texture2D(uDivergence, vUv).x;
        float pressure = (L + R + B + T - divergence) * 0.25;
        gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
    }
`);

const gradientSubtractShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uPressure;
    uniform sampler2D uVelocity;

    vec2 boundary (in vec2 uv) {
        uv = min(max(uv, 0.0), 1.0);
        return uv;
    }

    void main () {
        float L = texture2D(uPressure, boundary(vL)).x;
        float R = texture2D(uPressure, boundary(vR)).x;
        float T = texture2D(uPressure, boundary(vT)).x;
        float B = texture2D(uPressure, boundary(vB)).x;
        vec2 velocity = texture2D(uVelocity, vUv).xy;
        velocity.xy -= vec2(R - L, T - B);
        gl_FragColor = vec4(velocity, 0.0, 1.0);
    }
`);

let textureWidth;
let textureHeight;
let density;
let velocity;
let divergence;
let curl;
let pressure;
initFramebuffers();

const clearProgram = new GLProgram(baseVertexShader, clearShader);
const displayProgram = new GLProgram(baseVertexShader, displayShader);
const splatProgram = new GLProgram(baseVertexShader, splatShader);
const advectionProgram = new GLProgram(baseVertexShader, ext.supportLinearFiltering ? advectionShader : advectionManualFilteringShader);
const divergenceProgram = new GLProgram(baseVertexShader, divergenceShader);
const curlProgram = new GLProgram(baseVertexShader, curlShader);
const vorticityProgram = new GLProgram(baseVertexShader, vorticityShader);
const pressureProgram = new GLProgram(baseVertexShader, pressureShader);
const gradienSubtractProgram = new GLProgram(baseVertexShader, gradientSubtractShader);

function initFramebuffers() {
  textureWidth = gl.drawingBufferWidth >> config.TEXTURE_DOWNSAMPLE;
  textureHeight = gl.drawingBufferHeight >> config.TEXTURE_DOWNSAMPLE;

  const texType = ext.halfFloatTexType;
  const rgba = ext.formatRGBA;
  const rg = ext.formatRG;
  const r = ext.formatR;

  density = createDoubleFBO(2, textureWidth, textureHeight, rgba.internalFormat, rgba.format, texType, ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST);
  velocity = createDoubleFBO(0, textureWidth, textureHeight, rg.internalFormat, rg.format, texType, ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST);
  divergence = createFBO(4, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
  curl = createFBO(5, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
  pressure = createDoubleFBO(6, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
}

function createFBO(texId, w, h, internalFormat, format, type, param) {
  gl.activeTexture(gl.TEXTURE0 + texId);
  let texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);

  let fbo = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
  gl.viewport(0, 0, w, h);
  gl.clear(gl.COLOR_BUFFER_BIT);

  return [texture, fbo, texId];
}

function createDoubleFBO(texId, w, h, internalFormat, format, type, param) {
  let fbo1 = createFBO(texId, w, h, internalFormat, format, type, param);
  let fbo2 = createFBO(texId + 1, w, h, internalFormat, format, type, param);

  return {
    get read() {
      return fbo1;
    },
    get write() {
      return fbo2;
    },
    swap() {
      let temp = fbo1;
      fbo1 = fbo2;
      fbo2 = temp;
    } };

}

const blit = (() => {
  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW);
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(0);

  return destination => {
    gl.bindFramebuffer(gl.FRAMEBUFFER, destination);
    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
  };
})();

let lastTime = Date.now();
multipleSplats(parseInt(Math.random() * 20) + 5);
update();

function update() {
  resizeCanvas();

  const dt = Math.min((Date.now() - lastTime) / 1000, 0.016);
  lastTime = Date.now();

  gl.viewport(0, 0, textureWidth, textureHeight);

  if (splatStack.length > 0)
  multipleSplats(splatStack.pop());

  advectionProgram.bind();
  gl.uniform2f(advectionProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read[2]);
  gl.uniform1i(advectionProgram.uniforms.uSource, velocity.read[2]);
  gl.uniform1f(advectionProgram.uniforms.dt, dt);
  gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION);
  blit(velocity.write[1]);
  velocity.swap();

  gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read[2]);
  gl.uniform1i(advectionProgram.uniforms.uSource, density.read[2]);
  gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION);
  blit(density.write[1]);
  density.swap();

  for (let i = 0; i < pointers.length; i++) {
    const pointer = pointers[i];
    if (pointer.moved) {
      splat(pointer.x, pointer.y, pointer.dx, pointer.dy, pointer.color);
      pointer.moved = false;
    }
  }

  curlProgram.bind();
  gl.uniform2f(curlProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read[2]);
  blit(curl[1]);

  vorticityProgram.bind();
  gl.uniform2f(vorticityProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read[2]);
  gl.uniform1i(vorticityProgram.uniforms.uCurl, curl[2]);
  gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
  gl.uniform1f(vorticityProgram.uniforms.dt, dt);
  blit(velocity.write[1]);
  velocity.swap();

  divergenceProgram.bind();
  gl.uniform2f(divergenceProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read[2]);
  blit(divergence[1]);

  clearProgram.bind();
  let pressureTexId = pressure.read[2];
  gl.activeTexture(gl.TEXTURE0 + pressureTexId);
  gl.bindTexture(gl.TEXTURE_2D, pressure.read[0]);
  gl.uniform1i(clearProgram.uniforms.uTexture, pressureTexId);
  gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE_DISSIPATION);
  blit(pressure.write[1]);
  pressure.swap();

  pressureProgram.bind();
  gl.uniform2f(pressureProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence[2]);
  pressureTexId = pressure.read[2];
  gl.uniform1i(pressureProgram.uniforms.uPressure, pressureTexId);
  gl.activeTexture(gl.TEXTURE0 + pressureTexId);
  for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
    gl.bindTexture(gl.TEXTURE_2D, pressure.read[0]);
    blit(pressure.write[1]);
    pressure.swap();
  }

  gradienSubtractProgram.bind();
  gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read[2]);
  gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read[2]);
  blit(velocity.write[1]);
  velocity.swap();

  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  displayProgram.bind();
  gl.uniform1i(displayProgram.uniforms.uTexture, density.read[2]);
  blit(null);

  requestAnimationFrame(update);
}

function splat(x, y, dx, dy, color) {
  splatProgram.bind();
  gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read[2]);
  gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height);
  gl.uniform2f(splatProgram.uniforms.point, x / canvas.width, 1.0 - y / canvas.height);
  gl.uniform3f(splatProgram.uniforms.color, dx, -dy, 1.0);
  gl.uniform1f(splatProgram.uniforms.radius, config.SPLAT_RADIUS);
  blit(velocity.write[1]);
  velocity.swap();

  gl.uniform1i(splatProgram.uniforms.uTarget, density.read[2]);
  gl.uniform3f(splatProgram.uniforms.color, color[0] * 0.3, color[1] * 0.3, color[2] * 0.3);
  blit(density.write[1]);
  density.swap();
}

function multipleSplats(amount) {
  for (let i = 0; i < amount; i++) {
    const color = [Math.random() * 10, Math.random() * 10, Math.random() * 10];
    const x = canvas.width * Math.random();
    const y = canvas.height * Math.random();
    const dx = 1000 * (Math.random() - 0.5);
    const dy = 1000 * (Math.random() - 0.5);
    splat(x, y, dx, dy, color);
  }
}

function resizeCanvas() {
  if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
    initFramebuffers();
  }
}

canvas.addEventListener('mousemove', e => {
  pointers[0].moved = pointers[0].down;
  pointers[0].dx = (e.offsetX - pointers[0].x) * 10.0;
  pointers[0].dy = (e.offsetY - pointers[0].y) * 10.0;
  pointers[0].x = e.offsetX;
  pointers[0].y = e.offsetY;
});

canvas.addEventListener('touchmove', e => {
  e.preventDefault();
  const touches = e.targetTouches;
  for (let i = 0; i < touches.length; i++) {
    let pointer = pointers[i];
    pointer.moved = pointer.down;
    pointer.dx = (touches[i].pageX - pointer.x) * 10.0;
    pointer.dy = (touches[i].pageY - pointer.y) * 10.0;
    pointer.x = touches[i].pageX;
    pointer.y = touches[i].pageY;
  }
}, false);

canvas.addEventListener('mousemove', () => {
  pointers[0].down = true;
  pointers[0].color = [Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2];
});

canvas.addEventListener('touchstart', e => {
  e.preventDefault();
  const touches = e.targetTouches;
  for (let i = 0; i < touches.length; i++) {
    if (i >= pointers.length)
    pointers.push(new pointerPrototype());

    pointers[i].id = touches[i].identifier;
    pointers[i].down = true;
    pointers[i].x = touches[i].pageX;
    pointers[i].y = touches[i].pageY;
    pointers[i].color = [Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2];
  }
});

window.addEventListener('mouseleave', () => {
  pointers[0].down = false;
});

window.addEventListener('touchend', e => {
  const touches = e.changedTouches;
  for (let i = 0; i < touches.length; i++)
  for (let j = 0; j < pointers.length; j++)
  if (touches[i].identifier == pointers[j].id)
  pointers[j].down = false;
});
</script>

<section id='container'>
  <h41 class='a-title'>SAILOR MOON</h41>
  <h42 class='a-second-title'>За туманом</h42>
  <canvas></canvas>
</section>

[/html]

[html]
<style>
/* member group colors from athena codes' list here:
   https://codepen.io/athenacodes/pen/ExMYXpg?editors=1000
   
   member group icons from yuan's list here:
   https://codepen.io/kingslayerr/pen/ZYzLXPx?editors=1000
   
   big mcthankies <3 */

@font-face {
  font-family: "Distrela Extra Light";
  src: url("https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Extra_Light.otf");
  ascent-override: 125%;
}
@font-face {
  font-family: "Distrela Light";
  src: url("https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Light.otf");
  ascent-override: 125%;
}
@font-face {
  font-family: "Distrela";
  src: url("https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Regular.otf");
  ascent-override: 125%;
}
@font-face {
  font-family: "Distrela Semibold";
  src: url("https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Semi_Bold.otf");
  ascent-override: 125%;
}
@font-face {
  font-family: "Distrela Bold";
  src: url("https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Bold.otf");
  ascent-override: 125%;
}
@font-face {
  font-family: "Distrela Extra Bold";
  src: url("https://files.jcink.net/uploads2/leaptesting/Ekahermawan___Distrela_Extra_Bold.otf");
  ascent-override: 125%;
}
@font-face {
  font-family: "Chronicle";
  src: url("https://files.jcink.net/uploads2/leaptesting/Chronicle_Deck_Bold.otf");
  ascent-override: 125%;
}

:root {
  scrollbar-width: thin;
  scrollbar-color: var(--bgInverse2) transparent;
  scroll-behavior: smooth;

  --bg1: #e3e3e3;
  --bg2: #d7d7d7;
  --bgInverse: #595959;
  --bgInverse2: #444;

  --accent: #897666;

  --title: "Distrela", serif;
  --titleL: "Distrela Light", serif;
  --titleEL: "Distrela Extra Light", serif;
  --titleSB: "Distrela Semibold", serif;
  --titleB: "Distrela Bold", serif;
  --titleEB: "Distrela Extra Bold", serif;
  --title2: "Chronicle", serif;
  --body: "Noto Serif", serif;

  --lightOutline: var(--bg1) 1px 0px 0px, var(--bg1) 0.540302px 0.841471px 0px,
    var(--bg1) -0.416147px 0.909297px 0px, var(--bg1) -0.989993px 0.14112px 0px,
    var(--bg1) -0.653644px -0.756803px 0px,
    var(--bg1) 0.283662px -0.958924px 0px, var(--bg1) 0.96017px -0.279416px 0px;
  --darkOutline: var(--bgInverse) 1px 0px 0px,
    var(--bgInverse) 0.540302px 0.841471px 0px,
    var(--bgInverse) -0.416147px 0.909297px 0px,
    var(--bgInverse) -0.989993px 0.14112px 0px,
    var(--bgInverse) -0.653644px -0.756803px 0px,
    var(--bgInverse) 0.283662px -0.958924px 0px,
    var(--bgInverse) 0.96017px -0.279416px 0px;
  --darkOutline2: var(--bgInverse2) 1px 0px 0px,
    var(--bgInverse2) 0.540302px 0.841471px 0px,
    var(--bgInverse2) -0.416147px 0.909297px 0px,
    var(--bgInverse2) -0.989993px 0.14112px 0px,
    var(--bgInverse2) -0.653644px -0.756803px 0px,
    var(--bgInverse2) 0.283662px -0.958924px 0px,
    var(--bgInverse2) 0.96017px -0.279416px 0px;

  --astorRender: url(https://i.ibb.co/PGYN9Fy/Viviiiii.png);
  --astorRender2: url(https://i.ibb.co/v6YjpVgR/Vivi-Transparent2.png);
  --astorBorder: url(https://i.ibb.co/GH0HwDj/Vivi2.png);
  --astorCat: url(https://i.ibb.co/W4td2S60/Vivi-Transparent.png);
  --astorIcon: url(https://i.ibb.co/xt5RpkNs/Vivvvv.png);

  --roseImg: url(https://i.ibb.co/cYWcmTb/Rose-Small.png);
  --roseFill: url(https://i.ibb.co/W6gzSfF/Rose-Small-Fill.png);
}
body {
  margin: 0px;
  background-color: var(--bg1);
}
body.darkmode {
  --bg1: #222;
  --bg2: #2b2b2b;
  --bg3: #333;
  --bgInverse: #999;
  --bgInverse2: #aaa;
  --bgInverse3: #ccc;
  --lightOutline: var(--bg1) 1px 0px 0px, var(--bg1) 0.540302px 0.841471px 0px,
    var(--bg1) -0.416147px 0.909297px 0px, var(--bg1) -0.989993px 0.14112px 0px,
    var(--bg1) -0.653644px -0.756803px 0px,
    var(--bg1) 0.283662px -0.958924px 0px, var(--bg1) 0.96017px -0.279416px 0px;
  --darkOutline: var(--bgInverse) 1px 0px 0px,
    var(--bgInverse) 0.540302px 0.841471px 0px,
    var(--bgInverse) -0.416147px 0.909297px 0px,
    var(--bgInverse) -0.989993px 0.14112px 0px,
    var(--bgInverse) -0.653644px -0.756803px 0px,
    var(--bgInverse) 0.283662px -0.958924px 0px,
    var(--bgInverse) 0.96017px -0.279416px 0px;

  --longImg: url(https://a.l3n.co/i/YUmYco.png);
  --squareImg: url(https://c.l3n.co/i/YUBaQZ.png);
}
.GID-Hope,
.GID-7 {
  --accent: #b39a50;
}
.GID-Fate,
.GID-8 {
  --accent: #986fa0;
}
.GID-Unity,
.GID-9 {
  --accent: #a3757d;
}
.GID-Liberty,
.GID-10 {
  --accent: #9da2cc;
}
.GID-Fortune,
.GID-11 {
  --accent: #c77a5a;
}
.GID-Entropy,
.GID-12 {
  --accent: #829199;
}
.GID-Passion,
.GID-13 {
  --accent: #ba6a87;
}
.GID-Knowledge,
.GID-14 {
  --accent: #8faa90;
}
.GID-Vitality,
.GID-15 {
  --accent: #b28c70;
}
.GID-Destruction,
.GID-16 {
  --accent: #9a8c98;
}
.GID-Space,
.GID-17 {
  --accent: #a1b66f;
}
.GID-Time,
.GID-18 {
  --accent: #b6565d;
}
.GID-Order,
.GID-19 {
  --accent: #897666;
}
.GID-Unbound,
.GID-20 {
  --accent: #80aeb3;
}

.astor {
  padding: 50px;
  padding: clamp(35px, 5vw, 125px);
  color: var(--bgInverse);
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
}

@media (max-width: 1149px) {
  .astor::before {
    background-size: 200% 200%;
  }
}

.astor-menu {
  position: fixed;
  z-index: 100000001;
  top: clamp(35px, 5vw, 125px);
  margin-top: 25px;
  right: clamp(35px, 5vw, 125px);
  border: solid 1px var(--bgInverse);
  background-color: var(--bg1);
  font: 800 11px / 10px var(--body);
  text-transform: uppercase;
  letter-spacing: 1px;
  outline: solid 2px var(--bg1);
  display: flex;
  transition: margin-top 0.5s;
}
.astor-menu-left {
  position: relative;
  padding: 14px;
  box-shadow: 1px 0px 0px var(--bgInverse);
  margin-right: 1px;
  background: linear-gradient(-135deg, var(--bgInverse2) 25%, var(--accent));
  background-size: 400% 100%;
  background-position: 75% 0%;
  outline: solid 2px var(--bg1);
  color: var(--bg1);
  outline-offset: -2px;
  cursor: pointer;
  transition: background-color 0.5s, color 0.5s;
}
.astor-menu-left:hover {
  color: var(--accent);
}
.astor-menu-left b {
  position: relative;
  z-index: 1;
}
.astor-menu-right {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 1px 12px 0px 12px;
  font-size: 13px;
  background-color: var(--bgInverse2);
  outline: solid 2px var(--bg1);
  outline-offset: -2px;
}
.astor-menu-right a {
  cursor: pointer;
  transition: color 0.5s;
  text-decoration: none;
  color: var(--bg1);
}
.astor-menu-right a:hover {
  color: var(--accent);
}
.darkmode .astor-menu-left {
  background: var(--accent);
}
.darkmode .astor-menu-right {
  background-color: var(--bgInverse3);
}
.darkmode .astor-menu-left:hover {
  background-color: var(--bgInverse3);
  color: var(--bg1);
}
@media (max-width: 1149px) {
  .astor-border {
    height: 38px;
  }
  .astor-menu {
    top: -1px;
    right: -1px;
    margin-top: 0px;
    background-color: transparent;
    outline: none;
    color: var(--bg1);
    border-color: transparent;
  }
  .astor-menu-left {
    outline: none;
    background: transparent !important;
    box-shadow: none;
    padding-right: 0px;
  }
  .astor-menu-left b {
    text-shadow: var(--darkOutline);
  }
  .astor-menu-right {
    gap: 12px;
    outline: none;
    background-color: transparent !important;
  }
  .astor-menu-right a {
    color: var(--bg1);
    font-size: 14px;
  }
  .astor-menu-right a:first-of-type,
  .astor-menu-right a:last-of-type {
    display: none;
  }
  .darkmode .astor-menu-left:hover,
  .darkmode .astor-menu-right a:hover {
    color: var(--bgInverse3);
  }
}

/* MODULAR POSTS */

.minPost {
  border: solid 1px var(--bgInverse);
  padding: 5px;
  margin: 0px auto;
  position: relative;
  max-width: 700px;
}
.minPost-back {
  background-color: var(--accent);
  position: relative;
  height: 25px;
}
.minPost-back:nth-of-type(1) {
  transform: rotate(180deg);
}
.darkmode .minPost-back {
  background-color: var(--bg2);
}
.minPost-back2 {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  position: absolute;
  mask-image: var(--astorRender2);
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--astorRender2);
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.minPost-back2::before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--bgInverse);
}
.darkmode .minPost-back2::before {
  background-color: var(--accent);
}

.minPost-bulk {
  position: relative;
  z-index: 10;
  border-top: solid 1px var(--bgInverse);
  border-bottom: solid 1px var(--bgInverse);
  box-shadow: 0px -5px 0px var(--bg1), 0px 5px 0px var(--bg1),
    inset 0px 0px 0px 5px var(--bg1);
  background: radial-gradient(
    circle at 11% -12%,
    transparent 15%,
    color-mix(in srgb, transparent, var(--accent) 10%) 50%,
    color-mix(in srgb, transparent, var(--accent) 20%)
  );
  margin: 0px -5px;
  padding: 60px;
  font: 13px / 21px var(--body);
  text-align: justify;
}
.minPost-bulk::before {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  content: "";
  background-image: radial-gradient(var(--bg2) 1.2px, transparent 0);
  background-size: 25px 25px;
}
.minPost-bulk2 {
  position: relative;
  z-index: 1;
}
.minPost-bulk b {
  font-weight: 800 !important;
  color: var(--accent);
}
.minPost-bulk i {
  color: var(--bgInverse2);
}
.minPost-bulk u {
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  font-weight: 800 !important;
}
.minPost-bulk a {
  color: var(--bgInverse);
  font-weight: 800 !important;
}
.minPost-icon {
  display: flex;
  margin: 0px 0px 35px 0px;
  gap: 15px;
}
.minPost-icon::after {
  outline: solid 1px var(--bgInverse);
  outline-offset: 5px;
  margin: 6px;
  content: "";
  display: block;
  flex-grow: 1;
  background: linear-gradient(-150deg, var(--bg1), var(--accent));
  background-size: 200% 200%;
  background-position: center center;
  box-shadow: 0px 0px 0px 5px var(--bg1);
}
.minPost .squareicon {
  height: 70px;
  background-color: var(--bgInverse);
  outline: solid 1px var(--bgInverse);
  outline-offset: 5px;
  margin: 6px;
  box-shadow: 0px 0px 0px 5px var(--bg1);
}
.darkmode .minPost .squareicon {
  background-color: var(--bg1);
}
.minPost-icon img {
  height: 70px;
  width: 70px;
  mix-blend-mode: lighten;
}

.minPost tagged {
  display: flex;
  gap: 7px 15px;
  flex-wrap: wrap;
  margin: 45px 6px 6px 6px;
  font: 800 11px / 10px var(--body);
  text-transform: uppercase;
  letter-spacing: 2px;
  outline: solid 1px var(--bgInverse);
  outline-offset: 5px;
  background: linear-gradient(150deg, var(--bg1), var(--accent));
  background-size: 200% 200%;
  background-position: center center;
  padding: 15px;
  position: relative;
  margin-right: 135px;
  box-shadow: 0px 0px 0px 5px var(--bg1);
}
.minPost tagged::before {
  outline: solid 1px var(--bgInverse);
  outline-offset: 5px;
  margin: 6px;
  content: "tagged";
  display: block;
  background-color: var(--bgInverse);
  color: var(--bg1);
  padding: 15px 0px;
  position: absolute;
  top: -6px;
  right: -135px;
  bottom: -6px;
  width: 102px;
  box-shadow: 0px 0px 0px 5px var(--bg1);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.darkmode .minPost tagged::before {
  background-color: var(--bg2);
  color: var(--accent);
}
.minPost tagged a {
  text-decoration: none;
}
@media (max-width: 1149px) {
  .minPost tagged {
    margin: 100px 6px 6px 6px;
  }
  .minPost tagged::before {
    top: -68px;
    right: -6px;
    bottom: auto;
    left: -6px;
    width: auto;
  }
}

</style>
<div id="top"></div>
<div class="astor GID-">
  <div class="astor-border">
    <div></div>
  </div>

  <div class="astor-menu">
    <a id="menu" class="astor-menu-left"><b> toggle</b></a>
    <div class="astor-menu-right">
      <a href="#top"><i class="iconsax" icon-name="arrow-up-circle"></i></a>
      <a id="darkmode"><i class="iconsax" icon-name="sun"></i></a>
      <a href="#bot"><i class="iconsax" icon-name="arrow-down-circle"></i></a>
    </div>
  </div>

  <div class="minPost">
    <div class="minPost-back">
      <div class="minPost-back2"></div>
    </div>
    <div class="minPost-bulk">
      <div class="minPost-bulk2">
        <div class="minPost-icon">
          <div class="squareicon"><img src="https://files.jcink.net/uploads2/astoriarp//av-450.png?1776306432"></div>
        </div>

        It's the third of October. You should come over - best laid plans are not sober. Maybe not the way we thought we planned, but both of us will take this hand for a couple of days, and then we'll disappear. We don't have to talk of where we go from here. Oh, my dearly departed, my dearly departed. <u>One final shoulder here before we're done, and then there were none.</u> This last call could be all we can do for each other. Embrace for a dear old friend. Bring wine to bed - we'll toast what could have been, my dearly departed. To my dearly departed.
        <br><br>
        I don't know how to mend it when this chapter ended, when all of my plans have depended on you. But at least tonight, we'll still pretend, hold each other close like it's not the end. And you can send me balloons, and we can laugh at the doom. ( <i>We both thought of that; doesn't it say something, too, oh, my dearly departed? My dearly departed?</i> ) One final shoulder here before we're done, until all are none. This last call could be all we can do for each other. Embrace for a dear old friend. Bring wine to bed - we'll toast what could have been, my dearly departed. To my dearly departed.
        <br><br>
        Every masterpiece, I'd write again. You'll always be my porcelain. I crossed my heart, but I stutterd, too. <b>So truth or dare: was I good to you?</b> Haven't had enough of you all to myself. Still right beside you in sickness and health. Forever after, you will be my home - and there's no place like home.
        <br><br>
        We never sent the cards. They're all still on the table. Wanna throw them out, but I'm just not able, my dearly departed. My dearly departed, my dear old friend.

        <tagged><a href="#">first lastname</a> <a href="#">lastname first</a></tagged>

      </div>
    </div>
    <div class="minPost-back">
      <div class="minPost-back2"></div>
    </div>
  </div>
 
 
 
 
 
</div>

</div>

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<link media="all" href="https://files.jcink.net/uploads2/astoriarp/SITE_FILES/astoria_bounds_embedded.css" rel="stylesheet">
<link href="https://iconsax.gitlab.io/i/icons.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitty/2.3.6/fitty.min.js"></script>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">

[/html]