CSS triangles SVG animation

common.js

var i = 0;   
	function changeClass(){
	    $("body").removeClass("figure" + i)
	        i = (i==4)?1:i+1;     
	    $("body").addClass("figure" + i); 
  } 
  var gogo = setInterval(changeClass, 2500);
	setTimeout(changeClass, 500);
	$('#svg').click(function(event) {
		clearInterval(gogo);
		changeClass();
		gogo = setInterval(changeClass, 2500);
  });

index.pug

            section#svg
              .canvas
                - for ( i=1; i < 101 ; i++ )
                  div(class= 'p p'+i)

polygon.scss

$void: polygon(50% 50%, 50% 50%, 50% 50% );
$css: polygon(23.39% 59.9%, 33.19% 54.8%, 23.19% 51.77% ),
polygon(13.04% 54.77%, 23.39% 59.9%, 23.19% 51.77% ),
polygon(16.25% 39.55%, 13.04% 54.77%, 23.19% 51.77% ),
polygon(23.19% 51.77%, 33.19% 54.8%, 27.76% 48.83% ),
polygon(27.76% 48.83%, 36.1% 46.27%, 28.81% 44.82% ),
polygon(33.19% 54.8%, 36.1% 46.27%, 27.76% 48.83% ),
polygon(28.54% 33.72%, 23.25% 19.33%, 23.01% 27.37% ),
polygon(33.58% 25.45%, 23.25% 19.33%, 28.54% 33.72% ),
polygon(35.75% 31.85%, 33.58% 25.45%, 28.54% 33.72% ),
polygon(23.25% 19.33%, 13.21% 24.2%, 23.01% 27.37% ),
polygon(23.01% 27.37%, 13.21% 24.2%, 16.25% 39.55% ),
polygon(8.98% 39.55%, 13.04% 54.77%, 16.25% 39.55% ),
polygon(13.21% 24.2%, 8.98% 39.55%, 16.25% 39.55% ),
polygon(60.35% 24.57%, 50.63% 19.25%, 54.69% 31.23% ),
polygon(55.14% 47.8%, 62.56% 47.33%, 53.66% 44.53% ),
polygon(62.1% 30.17%, 60.35% 24.57%, 54.69% 31.23% ),
polygon(50.34% 26.95%, 39.39% 30.97%, 46.64% 30.63% ),
polygon(60.11% 55.93%, 62.56% 47.33%, 55.14% 47.8% ),
polygon(50.63% 19.25%, 39.39% 30.97%, 50.34% 26.95% ),
polygon(54.69% 31.23%, 50.63% 19.25%, 50.34% 26.95% ),
polygon(46.74% 49.82%, 43.1% 57.6%, 50.84% 52% ),
polygon(45.83% 46.37%, 39.31% 51.63%, 46.74% 49.82% ),
polygon(50.9% 59.9%, 60.11% 55.93%, 55.14% 47.8% ),
polygon(39.31% 51.63%, 43.1% 57.6%, 46.74% 49.82% ),
polygon(38.55% 47.3%, 39.31% 51.63%, 45.83% 46.37% ),
polygon(43.1% 57.6%, 50.9% 59.9%, 50.84% 52% ),
polygon(50.84% 52%, 50.9% 59.9%, 55.14% 47.8% ),
polygon(39.39% 30.97%, 42.79% 39.92%, 46.64% 30.63% ),
polygon(48.41% 42.63%, 53.66% 44.53%, 53.11% 35.17% ),
polygon(53.11% 35.17%, 53.66% 44.53%, 58.78% 37.82% ),
polygon(46.64% 30.63%, 42.79% 39.92%, 48.28% 33.62% ),
polygon(53.66% 44.53%, 62.56% 47.33%, 58.78% 37.82% ),
polygon(42.79% 39.92%, 48.41% 42.63%, 48.28% 33.62% ),
polygon(48.28% 33.62%, 48.41% 42.63%, 53.11% 35.17% ),
polygon(75.01% 33.62%, 75.16% 42.63%, 79.85% 35.17% ),
polygon(69.53% 39.92%, 75.16% 42.63%, 75.01% 33.62% ),
polygon(77.36% 19.25%, 66.13% 30.97%, 73.38% 30.63% ),
polygon(73.38% 30.63%, 66.13% 30.97%, 75.01% 33.62% ),
polygon(66.13% 30.97%, 69.53% 39.92%, 75.01% 33.62% ),
polygon(85.51% 37.82%, 81.88% 47.8%, 89.3% 47.33% ),
polygon(81.88% 47.8%, 86.85% 55.93%, 89.3% 47.33% ),
polygon(79.85% 35.17%, 80.41% 44.53%, 85.51% 37.82% ),
polygon(80.41% 44.53%, 81.88% 47.8%, 85.51% 37.82% ),
polygon(75.16% 42.63%, 80.41% 44.53%, 79.85% 35.17% ),
polygon(77.64% 59.9%, 86.85% 55.93%, 77.58% 52% ),
polygon(72.56% 46.37%, 72.34% 46.55%, 69.84% 57.6% 73.47% 49.82% ),
polygon(73.47% 49.82%, 77.64% 59.9%, 77.58% 52% ),
polygon(77.09% 26.95%, 77.36% 19.25%, 73.38% 30.63% ),
polygon(66.06% 51.63%, 69.84% 57.6%, 72.34% 46.55% ),
polygon(72.34% 46.55%, 72.34% 46.55%, 72.56% 46.37% 65.29% 47.3% 66.06% 51.63% 72.34% 46.55% ),
polygon(69.84% 57.6%, 77.64% 59.9%, 73.47% 49.82% ),
polygon(87.09% 24.57%, 77.36% 19.25%, 81.42% 31.23% ),
polygon(81.42% 31.23%, 77.36% 19.25%, 77.09% 26.95% ),
polygon(88.84% 30.17%, 87.09% 24.57%, 81.42% 31.23% ),
polygon(77.58% 52%, 86.85% 55.93%, 81.88% 47.8% );

$js: polygon(42.41% 26.12%, 49.55% 26.08%, 42.14% 18.57% ),
polygon(49.55% 45.53%, 49.55% 26.08%, 42.41% 26.12% ),
polygon(42.41% 45.53%, 49.55% 45.53%, 42.41% 26.12% ),
polygon(47.14% 54.5%, 49.55% 45.53%, 42.41% 45.53% ),
polygon(49.55% 26.08%, 49.84% 18.57%, 42.14% 18.57% ),
polygon(30.44% 53.93%, 39.09% 58.28%, 38.99% 50.3% ),
polygon(34.96% 45.35%, 30.44% 53.93%, 38.99% 50.3% ),
polygon(38.99% 50.3%, 47.14% 54.5%, 42.41% 45.53% ),
polygon(28.14% 48.48%, 30.44% 53.93%, 34.96% 45.35% ),
polygon(39.09% 58.28%, 47.14% 54.5%, 38.99% 50.3% ),
polygon(57.85% 55.98%, 65.65% 58.28%, 65.59% 50.38% ),
polygon(65.65% 58.28%, 74.86% 54.32%, 65.59% 50.38% ),
polygon(61.49% 48.2%, 57.85% 55.98%, 65.59% 50.38% ),
polygon(54.06% 50.02%, 57.85% 55.98%, 61.49% 48.2% ),
polygon(53.3% 45.68%, 54.06% 50.02%, 60.58% 44.75% ),
polygon(60.58% 44.75%, 54.06% 50.02%, 61.49% 48.2% ),
polygon(65.59% 50.38%, 74.86% 54.32%, 69.89% 46.18% ),
polygon(63.03% 32%, 63.16% 41.02%, 67.86% 33.55% ),
polygon(67.86% 33.55%, 68.41% 42.92%, 73.53% 36.2% ),
polygon(68.41% 42.92%, 69.89% 46.18%, 77.31% 45.72% ),
polygon(69.89% 46.18%, 74.86% 54.32%, 77.31% 45.72% ),
polygon(73.53% 36.2%, 68.41% 42.92%, 77.31% 45.72% ),
polygon(57.54% 38.3%, 63.16% 41.02%, 63.03% 32% ),
polygon(63.16% 41.02%, 68.41% 42.92%, 67.86% 33.55% ),
polygon(75.1% 22.95%, 65.38% 17.63%, 69.44% 29.62% ),
polygon(76.85% 28.55%, 75.1% 22.95%, 69.44% 29.62% ),
polygon(69.44% 29.62%, 65.38% 17.63%, 65.09% 25.33% ),
polygon(65.09% 25.33%, 54.14% 29.35%, 61.39% 29.02% ),
polygon(54.14% 29.35%, 57.54% 38.3%, 61.39% 29.02% ),
polygon(65.38% 17.63%, 54.14% 29.35%, 65.09% 25.33% ),
polygon(61.39% 29.02%, 57.54% 38.3%, 63.03% 32% );

@mixin render($obj){
    @for $i from 1 through 100 {
        .p#{$i}{

            transition-delay:  random(500) +ms;
            background: rgba(#f0f, random(10)/10);
            @if length($obj) >= $i{
                clip-path: nth($obj, $i);
            }@else{
                clip-path: $void;
            }

        }
    }
}

@include render($js);
.css{
    @include render($css);
}
#svg{
    height: 100vh;
    width: 100%;
    position: relative;
    .canvas {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: 1px solid green;
        z-index: 100;
        .p{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            overflow: hidden;
            transition: all .2s cubic-bezier(0.95, 0.05, 0.795, 0.035);
        }
    }
}

http://cssing.org.ua/svg2percent/ - парсинг поинтов в clip-path