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 - .5) * 2.;
      uv.x *= iResolution.x / iResolution.y;
      float d = length(uv);
      d -= .5;
      float c = smoothstep(0., .2, d);
    	fragColor = vec4(vec3(c), 1.);
  }
  `;

kokomi.ShaderToyElement.register();