> For the complete documentation index, see [llms.txt](https://nswamy14.gitbook.io/i2djs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nswamy14.gitbook.io/i2djs/tutorial-point/svg-create-animate.md).

# SVG: Create-animate

learn SVG Layer - Element creation and animation of its attributes.

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

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

#### Layer Creation:

To create an SVG layer, invoke the **svgLayer** method with ContainerID "#mySvg". It returns the SVG renderer instance. For more details on **svgLayer** please refer : **API Reference -> Layers -> SVG Layer** Page.&#x20;

```
let renderer = i2d.svgLayer('#mySvg', {}, {});
```

### **Element Creation:**

**renderer.createEl()** API is used to create the Element of type '**el**' with '**attr'** attributes and '**style'** properties. In the below example we are creating **Circle** with attributes specified inside the **attr** object and styles in the **style** object.

```
let circle = renderer.createEl({
    el: 'circle',
    attr: {
        r: 50,
        cx: renderer.width / 2,
        cy: renderer.height / 2
    },
    style: {
        fill: '#ff0000'
    }
})
```

### 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'
    }
});
```