# SVG Path animation (Chartist example)

> Lines and areas of three series grow from the bottom, one series after the other.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import { lineChart, easings, findAll, Svg, type ChartPlugin } from 'chartist';

// Lines and areas grow from the bottom with SMIL, one series after the other.
const growPaths: ChartPlugin = {
  name: 'grow-paths',
  install(chart) {
    let height = 0;
    chart.on('layout', ({ area }) => {
      height = area.y1 - area.y2;
    });
    chart.on('mount', ({ scene, elementOf }) => {
      const shapes = [
        ...findAll(scene, { role: 'line' }),
        ...findAll(scene, { role: 'area' })
      ];
      for (const shape of shapes) {
        const element = elementOf(shape);
        if (!element) {
          continue;
        }
        const path = shape.ctx.path;
        new Svg(element).animate({
          d: {
            begin: 2000 * shape.ctx.seriesIndex,
            dur: 2000,
            from: path.clone().scale(1, 0).translate(0, height).stringify(),
            to: path.clone().stringify(),
            easing: easings.easeOutQuint
          }
        });
      }
    });
  }
};

lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    series: [
      [1, 5, 2, 5, 4, 3],
      [2, 3, 4, 8, 1, 2],
      [5, 4, 3, 2, 1, 0.5]
    ]
  },
  {
    plugins: [growPaths],
    low: 0,
    showArea: true,
    showPoint: false,
    fullWidth: true
  }
);
```

`index.html`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" src="/src/main.ts"></script>
  </head>
  <body>
    <div id="chart" style="height: 50vh"></div>
  </body>
</html>
```

The same chart with the 1.x classes (`src/main.classic.ts`):

```ts
import 'chartist/styles.css';
import { LineChart, easings } from 'chartist';
import { compat } from 'chartist/compat';

const chart = new LineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    series: [
      [1, 5, 2, 5, 4, 3],
      [2, 3, 4, 8, 1, 2],
      [5, 4, 3, 2, 1, 0.5]
    ]
  },
  {
    // 1.x draw events come from the compat plugin in v2.
    plugins: [compat],
    low: 0,
    showArea: true,
    showPoint: false,
    fullWidth: true
  }
);

chart.on('draw', data => {
  if (data.type === 'line' || data.type === 'area') {
    data.element.animate({
      d: {
        begin: 2000 * data.index,
        dur: 2000,
        from: data.path
          .clone()
          .scale(1, 0)
          .translate(0, data.chartRect.height())
          .stringify(),
        to: data.path.clone().stringify(),
        easing: easings.easeOutQuint
      }
    });
  }
});
```