growth.svg

<!DOCTYPE svgplus [ <!ENTITY duration "0.25s"> ]>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <style>
      path {
        stroke: blue;
        fill-opacity: 0.5;
        stroke-linejoin: round;
      }
      #one {
        fill: #f00;
      }
      #two {
        fill: #0f0;
      }
      #three {
        fill: #00f;
      }
      #four {
        fill: #ff0;
      }
      #five {
        fill: #f0f;
      }
    </style>
  </defs>
  <path id="one">
    <animate
      id="oneGrow"
      attributeName="d"
      dur="&duration;"
      fill="freeze"
      values="M0,0 L50,0 100,0z; M0,0 L50,30 100,0z"
      keyTimes="0; 1"
      begin="0s"
    />
    <animate
      id="sixGrow"
      attributeName="d"
      dur="&duration;"
      fill="freeze"
      values="M50,30 L0,0 100,0z; M50,30 L75,15 100,0z; M0,0z"
      keyTimes="0; 1; 1"
      begin="fiveGrow.end"
    />
    <animate
      id="elevenGrow"
      attributeName="d"
      dur="&duration;"
      fill="freeze"
      values="M0,0 L25,15 50,30z; M0,0 L100,0 50,30z; M0,0 L100,0 50,30z"
      keyTimes="0; 1; 1"
      begin="tenGrow.end"
    />
  </path>
  <path id="two">
    <animate
      id="twoGrow"
      attributeName="d"
      dur="&duration;"
      fill="freeze"
      values="M100,0 L75,15 50,30z; M100,0 L100,60 50,30z; M100,0 L100,60 50,30z"
      keyTimes="0; 1; 1"
      begin="oneGrow.end;elevenGrow.end"
    />
    <animate
      id="sevenGrow"
      attributeName="d"
      dur="&duration;"
      fill="freeze"
      values="M50,30 L100,0 100,60z; M50,30 L75,45 100,60z; M0,0z"
      keyTimes="0; 1; 1"
      begin="sixGrow.end"
    />
  </path>
  <path id="three">
    <animate
      id="threeGrow"
      attributeName="d"
      dur="&duration;"
      fill="freeze"
      values="M100,60 L75,45 50,30z; M100,60 L50,100 50,30z; M100,60 L50,100 50,30z"
      keyTimes="0; 1; 1"
      begin="twoGrow.end"
    />
    <animate
      id="eightGrow"
      attributeName="d"
      dur="&duration;"
      fill="freeze"
      values="M50,30 L100,60 50,100z; M50,30 L50,65 50,100z; M0,0z"
      keyTimes="0; 1; 1"
      begin="sevenGrow.end"
    />
  </path>
  <path id="four">
    <animate
      id="fourGrow"
      attributeName="d"
      dur="&duration;"
      fill="freeze"
      values="M50,100 L50,60 50,30z; M50,100 L0,60 50,30z; M50,100 L0,60 50,30z"
      keyTimes="0; 1; 1"
      begin="threeGrow.end"
    />
    <animate
      id="nineGrow"
      attributeName="d"
      dur="&duration;"
      fill="freeze"
      values="M0,60 L50,100 50,30z; M0,60 L25,45 50,30z; M0,0z"
      keyTimes="0; 1; 1"
      begin="eightGrow.end"
    />
  </path>
  <path id="five">
    <animate
      id="fiveGrow"
      attributeName="d"
      dur="&duration;"
      fill="freeze"
      values="M50,30 L25,45 0,60z; M50,30 L0,0 0,60z; M50,30 L0,0 0,60z"
      keyTimes="0; 1; 1"
      begin="fourGrow.end"
    />
    <animate
      id="tenGrow"
      attributeName="d"
      dur="&duration;"
      fill="freeze"
      values="M0,0 L0,60 50,30z; M0,0 L25,15 50,30z; M0,0z"
      keyTimes="0; 1; 1"
      begin="nineGrow.end"
    />
  </path>
</svg>