create box overlay in html

<div id="container">

  <div id="b1" class="box">
    <svg id="i1" class="icon" viewBox="0 0 100 100">
      <path id="top-line-1"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-1"  d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-1"  d="M30,63 L70,63 Z"></path>
    </svg>
  </div>

  <div id="b2" class="box">
    <svg id="i2" class="icon" viewBox="0 0 100 100">
      <path id="top-line-2"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-2"  d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-2"  d="M30,63 L70,63 Z"></path>
    </svg>
  </div>

  <div id="b3" class="box">
    <svg id="i3" class="icon" viewBox="0 0 100 100">
      <path id="top-line-3"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-3"  d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-3"  d="M30,63 L70,63 Z"></path>
    </svg>
  </div>

  <div id="b4" class="box">
    <svg id="i4" class="icon" viewBox="0 0 100 100">
      <polyline id="top-line-4" points="30 37 50 37 70 37"></polyline>
      <path id="middle-line-4"  d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-4"  d="M30,63 L70,63 Z"></path>
    </svg>
  </div>

  <div id="b5" class="box">
    <svg id="i5" class="icon" viewBox="0 0 100 100">
      <path id="top-line-5"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-5"  d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-5"  d="M30,63 L70,63 Z"></path>
    </svg>
  </div>

  <div id="b6" class="box">
    <svg id="i6" class="icon" viewBox="0 0 100 100">
      <path id="top-line-6"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-6"  d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-6"  d="M30,63 L70,63 Z"></path>
    </svg>
  </div>

</div>

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/animateAnything.js"></script>