CodePen Embed - animated flow chart

<table class="pearent-table">
    <tr>
        <td style="width: 100px !important;height:100px"></td>
        <td style="width: 100px !important;height:100px"></td>
        <td style="width: 100px !important;height:100px"></td>
        <td style="width: 100px !important;height:100px"></td>
        <td style="width: 100px !important;height:100px"></td>
        <td style="width: 100px !important;height:100px"></td>
        <td style="width: 100px !important;height:100px">
          <svg class="item1-diagonal">
              <line x1="0" y1="100%" x2="100%" y2="0"></line>
         </svg>
            <ul class="ch-grid">
                <li>
                    <div class="ch-item ch-img-1">
                        <div class="ch-info-wrap">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-1">2015</div>
                                <div class="ch-info-back">
                                    <h3>2015</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
           <svg class="item2-diagonal">
              <line x1="0" y1="100%" x2="100%" y2="0"></line>
         </svg>
            <ul class="ch-grid">
                <li>
                    <div class="ch-item ch-img-2">
                        <div class="ch-info-wrap">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-1">2014</div>
                                <div class="ch-info-back">
                                    <h3>2014</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
           <svg class="item3-diagonal">
              <line x1="0" y1="100%" x2="100%" y2="0"></line>
         </svg>
            <ul class="ch-grid">
                <li>
                    <div class="ch-item ch-img-3">
                        <div class="ch-info-wrap">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-1">2012</div>
                                <div class="ch-info-back">
                                    <h3>2012</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td>
           <svg class="item4-diagonal">
              <line x1="0" y1="100%" x2="100%" y2="0"></line>
         </svg>
            <ul class="ch-grid">
                <li>
                    <div class="ch-item ch-img-4">
                        <div class="ch-info-wrap">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-1">2011</div>
                                <div class="ch-info-back">
                                    <h3>2011</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td>
           <svg class="item5-diagonal">
              <line x1="0" y1="100%" x2="100%" y2="0"></line>
         </svg>
            <ul class="ch-grid">
                <li>
                    <div class="ch-item ch-img-5">
                        <div class="ch-info-wrap">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-1">2010</div>
                                <div class="ch-info-back">
                                    <h3>2010</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>
           <svg class="item6-diagonal">
              <line x1="0" y1="100%" x2="100%" y2="0"></line>
         </svg>
            <ul class="ch-grid">
                <li>
                    <div class="ch-item ch-img-6">
                        <div class="ch-info-wrap">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-1">2009</div>
                                <div class="ch-info-back">
                                    <h3>2009</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
           <svg class="item7-diagonal">
              <line x1="0" y1="100%" x2="100%" y2="0"></line>
         </svg>
            <ul class="ch-grid">
                <li>
                    <div class="ch-item ch-img-7">
                        <div class="ch-info-wrap">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-1">2007</div>
                                <div class="ch-info-back">
                                    <h3>2007</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

.body{
  background: #f9f9f9 url(https://tympanus.net/Tutorials/CircleHoverEffects/images/bg.jpg);
  font-weight: 300;
    font-size: 15px;
    color: #333;
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
    overflow-x: hidden;
}
body, html{
  padding:0px;
  margin:0px;
  font-size:25px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color:#555;
  
}
.pearent-table{
  width: 80%;
    padding: 30px;
}
td{
    border: 1px solid gray;
}
.ch-grid {
/*  margin: 0px 0 0 0; */
  padding: 0;
  list-style: none;
  display: block;
  text-align: center;
  width: 100%;
  position:relative;
}

.ch-grid:after,
.ch-item:before {
  content: '';
    display: table;
}

.ch-grid:after {
  clear: both;
}
.ch-grid li {
  width: 90px;
  height: 90px;
  display: inline-block;
/*  margin: 20px; */
}
.ch-item {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
    box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.31);
  cursor: default;
}
.ch-info-wrap{
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  perspective: 800px;
  transition: all 0.4s ease-in-out;
  top: 15px;
  left: 15px;
  background: #f9f9f9 url(../images/bg.jpg);
  box-shadow: 
    0 0 0 20px rgba(255,255,255,0.2), 
    inset 0 0 3px rgba(115,114, 23, 0.8);

}
.ch-info{
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
}
.ch-info > div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-position: center center;
  backface-visibility: hidden;
  background: #fff;
    line-height: 60px;
}
.ch-info .ch-info-back {
  transform: rotate3d(0,1,0,180deg);
  background: #000;
}
.ch-img-1, .ch-item.ch-img-1:before { 
      background: #c67044;
}

.ch-img-2, .ch-item.ch-img-2:before { 
  background: #606270;
}

.ch-img-3, .ch-item.ch-img-3:before { 
  background: #9777a1;
}
.ch-img-4, .ch-item.ch-img-4:before { 
  background: #cc4949;
}
.ch-img-5, .ch-item.ch-img-5:before { 
    background: #876b6b;
}
.ch-img-6, .ch-item.ch-img-6:before { 
  background: #5bb6a3;
}
.ch-img-7, .ch-item.ch-img-7:before { 
  background: #f2a149;
}
.ch-info h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  margin: 0 15px;
/*  padding: 40px 0 0 0; */
  height: 90px;
  font-family: 'Open Sans', Arial, sans-serif;
  text-shadow: 
    0 0 1px #fff, 
    0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
  color: #fff;
  padding: 10px 5px;
  font-style: italic;
  margin: 0 30px;
  font-size: 12px;
  border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
  display: block;
  color: rgba(255,255,255,0.7);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  padding-top: 4px;
  font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
  color: rgba(255,242,34, 0.8);
}

.ch-item:hover .ch-info-wrap {
  box-shadow: 
    0 0 0 0 rgba(255,255,255,0.8), 
    inset 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:hover .ch-info {
  transform: rotate3d(0,1,0,-180deg);
}
td{
  position:relative
}

svg {
  width: 100%;
  height: 100%;
  position: absolute;
}
svg line {
  stroke: #e2e2e2;
  stroke-width: 10;
}

svg.item1-diagonal line{
  stroke: #c67044;
}
svg.item2-diagonal line{
  stroke: #606270;
}
svg.item3-diagonal line{
  stroke: #9777a1;
}
svg.item4-diagonal line{
  stroke: #cc4949;
}
svg.item5-diagonal line{
  stroke: #876b6b;
}
svg.item6-diagonal line{
  stroke: #5bb6a3;
}
svg.item7-diagonal line{
  stroke: #f2a149;
}

This Pen is owned by Shailesh on CodePen.

See more by @Shailesh_Patil on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://codepen.io/Shailesh_Patil/pen/ZRybrZ.js