- var n_rows = 7, p = []; 

style
  - for(var ridx = 1; ridx < n_rows; ridx++) {
    - var col_lim_inf = n_rows - ridx;
    - var col_lim_sup = n_rows + ridx;
    - var idx_lim_inf = Math.pow(ridx, 2) + 1;
    - var idx_lim_sup = idx_lim_inf + 2*ridx;
    - var a = [[idx_lim_inf], [idx_lim_sup]];
    - var na = a.length;
    - for(var i = 1; i < n_rows - ridx; i++) {
      - for(var j = 0; j < na; j++) {
        - var k = a[j][i - 1] + 2*(i + ridx)
        - a[j].push(k);
      - }
    - }
    - var sel = `.s3gon:nth-child(n + ${idx_lim_inf}):nth-child(-n + ${idx_lim_sup})`
    - if(ridx%2)
      - p.push(sel)
    | #{sel} { --ridx: #{ridx + 1} }
    | .s3gon:nth-child(#{a[0].join('), .s3gon:nth-child(')}) { --cidx: #{col_lim_inf} }
    | .s3gon:nth-child(#{a[1].join('), .s3gon:nth-child(')}) { --cidx: #{col_lim_sup} }
  - }
  | #{p.join(', ')} { --p0: -1 }
.grid(style=`--n-rows: ${n_rows}; --n-cols: ${2*n_rows + 1}; --cidx: ${n_rows}`)
  - for(var ridx = 0; ridx < n_rows; ridx++)
    - for(var cidx = n_rows - ridx; cidx <= n_rows + ridx; cidx++)
      .s3gon

@import 'compass/css3';

@function getPolyPoints(
    $n: 3 /* number of poly vertices */, 
    $oa: -90deg /* angular offset of 1st poly vertex */) {
  
  $ba: 360deg/$n; // base angle corrensponding to 1 poly edge
  $pl: (); // list of points, initially empty
  
  @for $i from 0 to $n {
    $ca: $i*$ba + $oa; // angle current point is at wrt x axis
    $x: calc(50%*(1 + #{cos($ca)})); // x coord of current point
    $y: calc(50%*(1 + var(--p)*#{sin($ca)})); // y coord of current point
    $pl: $pl, $x $y // add current point coords to points list
  }
  
  @return $pl
}

$c: #ff1ead;
$l: 5vmin;
$t: 1s;

$n3gon: 3;
$ba3gon: 360deg/$n3gon;
$rc3gon: .5*$l/sin(.5*$ba3gon);
$dc3gon: 2*$rc3gon;
$ri3gon: .5*$l/tan(.5*$ba3gon);
$h3gon: .5*$l*sqrt(3);
$mv: .5*($h3gon - $dc3gon);
$mh: .5*(.5*$l - $dc3gon);

:before, :after {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

body {
  display: grid;
  place-content: center;
  position: relative;
  margin: 0;
  height: 100vh;
  background: $c;
  
  &:before {
    opacity: .5;
    background: #000;
    animation: invert 2*$t ease-in-out (-$t) infinite alternate;
    content: ''
  }
}

.grid {
  display: grid;
  padding: -$mv (-$mh);
  filter: drop-shadow(2px 2px 5px $c)
}

.s3gon {
  --m: calc(.5*(1 - var(--p0, 1)*var(--p1, 1)));
  --p: calc(2*var(--m) - 1);
  grid-row: var(--ridx);
  grid-column: var(--cidx, var(--n-rows));
  position: relative;
  margin: calc(#{$mv} - (1 - var(--m))*#{$ri3gon}) $mh;
  width: $dc3gon; height: $dc3gon;
    
  &:before, &:after {
    border-radius: 50%;
    background: $c;
    clip-path: polygon(getPolyPoints());
    animation: shrink $t ease-out infinite alternate;
    animation-delay: calc(var(--cidx)*#{-$t}/var(--n-cols));
    content: ''
  }
  
  &:before {
    background: #000;
    animation-name: shrink, invert;
    animation-timing-function: ease-in, steps(1);
    animation-duration: $t, 2*$t
  }

  &:nth-child(odd) { --p1: -1 }
}

@keyframes shrink { 95%, 100% { transform: scale(0) } }

@keyframes invert { 50% { background: #fff; } }

// no JS here, but check out version #2 of this demo https://codepen.io/thebabydino/pen/bzVqQp