<div class="container">
  <div class="wrapper">
    <table class="chart-labels">
      <caption>Employees Through Years for 3 Companies</caption>
      <thead>
        <tr>
          <th>Year</th>
          <th>Company 1 Employees</th>
          <th>Company 2 Employees</th>
          <th>Company 3 Employees</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>2010</td>
          <td>40</td>
          <td>25</td>
          <td>15</td>
        </tr>
        <tr>
          <td>2013</td>
          <td>30</td>
          <td>35</td>
          <td>20</td>
        </tr>
        <tr>
          <td>2016</td>
          <td>25</td>
          <td>30</td>
          <td>15</td>
        </tr>
        <tr>
          <td>2019</td>
          <td>35</td>
          <td>20</td>
          <td>15</td>
        </tr>
        <tr>
          <td>2022</td>
          <td>40</td>
          <td>30</td>
          <td>20</td>
        </tr>
      </tbody>
    </table>
    <div class="chart-wrapper">
      <ul class="chart-y">
        <li>50</li>
        <li>40</li>
        <li>30</li>
        <li>20</li>
        <li>10</li>
        <li>0</li>
      </ul>
      <ul class="chart-x">
        <li>
          <span style="--start:80%; --end:60%"></span>
          <span style="--start:50%; --end:70%"></span>
          <span style="--start:30%; --end:40%"></span>
          <span>2010</span>
        </li>
        <li>
          <span style="--start:60%; --end:50%; --delay: 1"></span>
          <span style="--start:70%; --end:60%; --delay: 1"></span>
          <span style="--start:40%; --end:30%; --delay: 1"></span>
          <span>2013</span>
        </li>
        <li>
          <span style="--start:50%; --end:70%; --delay: 2"></span>
          <span style="--start:60%; --end:40%; --delay: 2"></span>
          <span style="--start:30%; --end:30%; --delay: 2"></span>
          <span>2016</span>
        </li>
        <li>
          <span style="--start:70%; --end:80%; --delay: 3"></span>
          <span style="--start:40%; --end:60%; --delay: 3"></span>
          <span style="--start:30%; --end:40%; --delay: 3"></span>
          <span>2019</span>
        </li>
        <li>
          <span style="--start:80%; --end:80%; --delay: 4"></span>
          <span style="--start:60%; --end:60%; --delay: 4"></span>
          <span style="--start:40%; --end:40%; --delay: 4"></span>
          <span>2022</span>
        </li>
      </ul>
    </div>
  </div>
</div>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --chart-color-line1: orange;
  --chart-color-line2: cornflowerblue;
  --chart-color-line3: salmon;
  --chart-thickness: 2px;
  --border: 1px solid rgba(211, 211, 211, 0.6);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  font-family: "Montserrat", sans-serif;
}

.container {
  margin: 50px auto;
  padding: 0 15px;
  max-width: 1600px;
}

.wrapper {
  display: flex;
  gap: 20px;
}

/* CHART LABELS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-labels {
  border-collapse: collapse;
  border: var(--border);
  text-align: center;
  flex: 1;
}

.chart-labels caption {
  margin-bottom: 20px;
}

.chart-labels th,
.chart-labels td {
  padding: 16px 12px;
}

.chart-labels tbody tr:nth-child(odd) {
  background: rgba(211, 211, 211, 0.4);
}

/* CHART WRAPPER
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.chart-wrapper {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: var(--border);
  flex: 2;
}

/* CHART-Y
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-wrapper .chart-y li {
  padding: 0 15px;
}

.chart-wrapper .chart-y li + li {
  margin-top: 40px;
}

/* CHART-X
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-wrapper .chart-x {
  display: flex;
  flex-grow: 1;
}

.chart-wrapper .chart-x li {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 1;
}

.chart-wrapper .chart-x li span:not(:last-child)::before,
.chart-wrapper .chart-x li span:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
}

.chart-wrapper .chart-x li span:nth-child(1)::before,
.chart-wrapper .chart-x li span:nth-child(1)::after {
  background: var(--chart-color-line1);
}

.chart-wrapper .chart-x li span:nth-child(2)::before,
.chart-wrapper .chart-x li span:nth-child(2)::after {
  background: var(--chart-color-line2);
}

.chart-wrapper .chart-x li span:nth-child(3)::before,
.chart-wrapper .chart-x li span:nth-child(3)::after {
  background: var(--chart-color-line3);
}

.chart-wrapper .chart-x li span:not(:last-child)::before {
  top: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    0 calc(100% - var(--start)),
    0 calc(100% - var(--start)),
    0 calc(100% - var(--start)),
    0 calc(100% - var(--start))
  );
  transition: clip-path 0.5s calc(var(--delay, 0) * 0.5s);
}

.chart-wrapper .chart-x li span:not(:last-child)::after {
  top: calc(100% - var(--start));
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.loaded .chart-wrapper .chart-x li span:not(:last-child)::before {
  clip-path: polygon(
    0 calc(100% - var(--start)),
    100% calc(100% - var(--end)),
    100% calc(calc(100% - var(--end)) + var(--chart-thickness)),
    0 calc(calc(100% - var(--start)) + var(--chart-thickness))
  );
}

/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 700px) {
  .wrapper {
    flex-direction: column;
  }

  .chart-wrapper {
    order: -1;
  }
}

@media (max-width: 500px) {
  .chart-wrapper {
    padding: 10px;
  }
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  font-size: 14px;
  background: white;
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

window.addEventListener("load", function () {
  document.body.classList.add("loaded");
});