# WebGL: Create-animate

Create an HTML container with ID to render the graphical context element

```
<div id="myWebgl"> </div>
```

### Layer Creation:

To create the WebGL layer, invoke the **webglLayer** method with ContainerID "#myWebgl". It returns webGL-2D renderer instance. For more details on **webglLayer** please refer : **API Reference -> Layers -> WebGL Layer** Page.&#x20;

```
let renderer = i2d.webglLayer('#myWebgl', {}, {});
```

### **Element Creation:**

To render elements, first, we need to create the shader group and then add elements to it. Without the shader group, elements won't be rendered. For example, to create a circle, we need to create a circle shader group and then rect elements.

**Code block to create rects.**

```
let rectGroup = webGlLayerInstance.createEl({
					el: 'group',
					attr: {
						shaderType: 'circle'
					}
				});
```

Let's create a circle element.

```
let rect = rectGroup.createEl({
					el: 'circle':
					attr: {
						cx: 100,
						cy: 100,
						r: 250
					},
					style: {
						fill: 'hsl(35%, 100%, 0%)';
					}
				});
```

### Animation:

Now we will animate circle radius from 50 to 200 and fillStyle from '#ff0000' to '#00ff00' in duration - 500 ms. By specifying loop = 10, animation will be repeated **10** time, with **alternate** direction and **easeInOutSin** easing.

```
circle.animateTo({
    duration: 500,
    loop: 10,
    ease: 'easeInOutSin',
    direction: 'alternate',
    attr: {
        r: 200
    },
    style: {
        fill: '#00ff00'
    }
});
```