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 */ `
  float sdBox(in vec2 p, in vec2 b)
{
    vec2 d = abs(p) - b;
    return length(max(d, vec2(0.))) + min(max(d.x, d.y), 0.);
}

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;

    float d = sdBox(uv, vec2(0.6, 0.3));
    float c = smoothstep(0.0, 0.02, d);
    fragColor = vec4(vec3(c), 1.0);
}

  `;

kokomi.ShaderToyElement.register();