<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="-250 -200 600 500"  version="1.0" clip-path="url(#clip)">
  <defs>
    <clipPath id="clip">
      <rect width="600" height="600" x="-250" y="-200"/>
    </clipPath>
    <path id="triangle" d="M0 0 l-15 26 30 0Z">     
     <animate attributeName="d" 
      values="M0 120 l-15 26 30 0Z; 
              M0 0 l-15 26 30 0Z;
              M0 0 l-15 26 30 0Z;
              M0 120 l-15 26 30 0Z;
              M0 120 l-15 26 30 0Z;"
       keySplines="
            0.5 0.25 0.75 1;
            0.5 0.25 0.75 1;
            0.5 0.25 0.75 1;
            0.5 0.25 0.75 1;
            " 
          calcMode="spline"
      dur="4s" begin="0s" repeatCount="indefinite" fill="freeze" />
    </path>
    <g id="hexagon">
        <use xlink:href="#triangle" transform="rotate(0)" fill="hsla(0, 100%, 57%, 1)"/>
        <use xlink:href="#triangle" transform="rotate(60)" fill="hsla(60, 100%, 57%, 1)" />
        <use xlink:href="#triangle" transform="rotate(120)" fill="hsla(120, 100%, 57%, 1)" />
        <use xlink:href="#triangle" transform="rotate(180)" 
        fill="hsla(180, 100%, 57%, 1)" />
        <use xlink:href="#triangle" transform="rotate(240)" 
             fill="hsla(240, 100%, 57%, 1)" />
        <use xlink:href="#triangle" transform="rotate(300)"         fill="hsla(300, 100%, 57%, 1)" />
         <animateTransform 
          attributeName="transform" 
          attributeType="XML" 
          type="rotate" 
          values="0; 0; 120; 0; 180"
          keySplines="
            0.5 0.25 0.75 1;
            0.5 0.25 0.75 1;
            0.5 0.25 0.75 1;
            0.5 0.25 0.75 1;
            " 
          from="0" to="60" dur="4s" begin="0s" repeatCount="indefinite"
          accumulate="sum"
          calcMode="spline"
          />
    </g>
    
    <g id="largeHexagon"> 
        <use xlink:href="#hexagon" transform="translate(45, 26)" />
        <use xlink:href="#hexagon" transform="translate(45, -26)" />
        <use xlink:href="#hexagon" transform="translate(45, 77)" />
        <use xlink:href="#hexagon" transform="translate(0, 0)" />
        <use xlink:href="#hexagon" transform="translate(0, 51)" />
        <use xlink:href="#hexagon" transform="translate(89, 0)" />
        <use xlink:href="#hexagon" transform="translate(89, 51)" />
    </g>
    <g id="hexagonColumn">
      <use xlink:href="#largeHexagon" />
    <use xlink:href="#largeHexagon" transform="translate(0, -100) " /> 
    <use xlink:href="#largeHexagon" transform="translate(0, -200) " /> 
    <use xlink:href="#largeHexagon" transform="translate(0, 100) " /> 
    <use xlink:href="#largeHexagon" transform="translate(0, 200) " /> 
      <use xlink:href="#largeHexagon" transform="translate(0, 300) " /> 
    <use xlink:href="#largeHexagon" transform="translate(0, 200) " /> 
    <use xlink:href="#largeHexagon" transform="translate(0, -100) " /> 
    <use xlink:href="#largeHexagon" transform="translate(0, -200) " /> 
    <use xlink:href="#largeHexagon" transform="translate(0, -300) " />
      
    </g>
    
    
  </defs>


 
  <g opacity="0" translate>
  <use xlink:href="#hexagonColumn" />
  <g transform="translate(133,24)">
      <use xlink:href="#hexagonColumn" />
  </g>
    <g transform="translate(133,24)">
      <use xlink:href="#hexagonColumn" />
  </g>
  <g transform="translate(-133,24)">
      <use xlink:href="#hexagonColumn" />
  </g>
  <g transform="translate(-266,24)">
      <use xlink:href="#hexagonColumn" />
  </g>
  <g transform="translate(266,24)">
      <use xlink:href="#hexagonColumn" />
  </g>
    <animate attributeName="opacity" 
      values="0; 0.3; 0; 0;" repeatCount="indefinite"
      dur="10s" begin="8s" fill="freeze" />
  </g>
  
  <use xlink:href="#largeHexagon" />
  
  
  
</svg>

svg {
  width: 400px;
  height: 100vh;
  border: 1px solid black;
}

body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: black;
}