JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
<shader-toy>
    <script type="frag"></script>
</shader-toy>

CSS

body {
  margin: 0;
  background: black;
}

JavaScript

document.querySelector('[type=frag]').textContent = /* glsl */ `
void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    vec2 uv = fragCoord / iResolution.xy;
    uv = (uv - vec2(0.5)) * 2.0;
    uv.x *= iResolution.x / iResolution.y;
    uv.x += 0.2;
		uv.y += 0.4;
    fragColor=vec4(uv,0.,1.);
}

  `;

kokomi.ShaderToyElement.register();