---
url: /examples/basics/indices.md
description: Draw indexed geometry by reusing vertex data through an index buffer.
---
::: example-editor
```ts
import { glCanvas } from "@radiancejs/gl";
import "./styles.css";
glCanvas({
canvas: "#glCanvas",
vertex: /*glsl*/ `
attribute vec2 aPosition;
attribute vec3 aColor;
varying vec3 vColor;
void main() {
gl_Position = vec4(aPosition, 0., 1.0);
vColor = aColor;
}
`,
fragment: /* glsl */ `
varying vec3 vColor;
void main() {
gl_FragColor = vec4(vColor, 1.);
}
`,
attributes: {
aPosition: {
size: 2,
data: [
[-0.5, 0.5],
[-0.5, -0.5],
[0.5, 0.5],
[0.5, -0.5],
].flat(),
},
aColor: {
size: 3,
data: [
[0, 1, 0],
[0, 0, 1],
[1, 1, 0],
[1, 0, 0],
].flat(),
},
index: {
size: 1,
data: [0, 1, 2, 1, 3, 2],
},
},
});
```
```css
html {
color-scheme: light dark;
}
body {
margin: 0;
height: 100svh;
display: grid;
place-items: center;
}
canvas {
width: min(90svmin, 900px);
aspect-ratio: 1;
display: block;
border-radius: 8px;
border: 1px solid rgb(128 128 128 / 0.4);
}
```
```html
RadianceJS Example
```
:::