CSS Exp Function Basic

<!DOCTYPE html>
<title>My Example</title>

.exp-bar {
    background-color: #0dcaf0;
    color: #000;
    font-weight: bold;
    height: 40px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-radius: 4px;
    white-space: nowrap;
    
    /* 
      Calculate the width: 
      Base Width * e^(var(--val))
    */
    width: calc(var(--base-width) * exp(var(--val)));
  }
  
  .exp-bar:last-child {
    margin-bottom: 0;
  }

/* Assign a simple sequential number to each bar */
  .bar-1 { --val: 0; }
  .bar-2 { --val: 1; background-color: #0bacce; color: white; }
  .bar-3 { --val: 2; background-color: #088da8; color: white; }
  .bar-4 { --val: 3; background-color: #056e82; color: white; }
</style>