A gradient in with the colors red in the top left, purple in the bottom left, yellow in the top right and white in the bottom right.
<shader-art autoplay dpr="1" role="img" tabindex="0" aria-label="{{ description }}">
<script type="text/buffer" id="position" data-size="2">
[-1, 1, -1,-1, 1,1, 1, 1, -1,-1, 1,-1]
</script>
<script type="text/buffer" id="uv" data-size="2">
[ 0, 0, 0, 1, 1,0, 1, 0, 0, 1, 1, 1]
</script>
<script type="text/vert">
precision highp float;
attribute vec4 position;
attribute vec2 uv;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = position;
}
</script>
<script type="text/frag">
precision highp float;
varying vec2 vUv;
void main() {
gl_FragColor = vec4(1.0, vUv.x, vUv.y, 1.0);
}
</script>
</shader-art>
<script type="module">
import { ShaderArt } from 'https://cdn.jsdelivr.net/npm/shader-art@1.3.0/dist/index.esm.js';
ShaderArt.register();
</script>
<style>
body {
margin:0;
height: 100vh;
background: #000;
color: #fff;
}
shader-art {
display: block;
width: 100vw;
height: 100vh;
height: 100dvh;
}
shader-art canvas {
display: block;
width: 100%;
height: 100%;
}
</style>