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.

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