How to animate SVG polygon points?

Question

I have created a line chart with SVG (polygon points) that I would like animated.

I would like the points to all start animating from the X axis, and when finished animating, the result to look like the following image.

It seems there is no simple way to achieve this, with the googling I have done. Any tips would be most appreciated, thanks.

Answer 1

What do you mean by "animating from the X axis" exactly? Do you mean start flat and grow upwards to this shape?

If so, it is actually very easy.

<svg viewBox="0 0 2040 352">
  <defs>
  </defs>
  
  <polygon points="" fill="red">
     <animate attributeName="points" dur="1s" fill="freeze"
              from="0,352, 550,352, 1240,352, 1592,352, 1880,352, 2040,352,
                   2040,352,0,352"
              to="0,292, 550,232, 1240,258, 1592,158, 1880,168, 2040,0,
                   2040,352,0,352"/>
  </polygon>
</svg>

This example uses vanilla SVG SMIL animations. You can also use one of a number of SVG graphing or animation libraries.

Answer 2

This effect can be easily achieved with transform:scaley keyframe animation:

(javascript code in followind snippet is only for generating random svg polygon)

let n = 5, w = innerWidth - 20, h = innerHeight - 20;
let pts = Array(n).fill(0).map((_, i) => [(1+i)*(w/(n+1)), -Math.random()* h]);

document.body.innerHTML += `<svg width=${w} height=${h} viewbox=0,${-h},${w},${h} >
  <polygon points=0,0,${pts},${w},0 /></svg>`;
  

@keyframes grow {
  0%   {transform: scaley(0)}
  100% {transform: scaley(1)}
}

polygon {
  fill: #e45;
  animation: grow 0.5s forwards;
}

Answer 3

I have done something in the past, this was however with a single control point of a SVG Bezier curve. However I think you can apply the same principle. I think you need to do the following steps

1. Create an array with y values of the curves
2. Create a jQuery animate function with a step method for each y value [jquery animate1

animate example

$({ n: 0 }).animate({ n: 40}, {
        duration: 1000,
        step: function(calculatedYValue, fx) {
            //update graphs with calculatedYValue
            console.log(parseInt(calculatedYValue), 10);   
        }
    });