.multigraph {
    width: 300px;
    height: 120px;
    position: absolute;
    top: 50%;
    left: 50% ;
    margin: -150px;
  
  }
  .multigraph:before {
    content: '';
    width: 300px;
    height: 150px;
    position: absolute;
    border: 30px solid rgba(0,0,0,0.1);
    border-radius: 300px 300px 0 0;
    border-bottom: none;
  }
  .tooltip {
    width: 80px;
    height: 30px;
    background: lightgrey;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 200;
    color: #000;
    border: 1px solid rgb(97, 97, 97);
    position: absolute;
    left: 50%;
    bottom: -40px;
    margin: -40px;
    transition: all 300ms ease-in-out;
    box-shadow: 0 0 5px grey;
    opacity: 0;
    transform: scale(.1);
  }
  
   .multigraph:hover .tooltip {
    bottom: 75%;
    opacity: .8;
    transform: scale(1);
  }
  .graph {
    width: 300px;
    height: 150px;
    position: absolute;
    overflow:hidden;
  
  }
  .graph:before, .graph:after {
    width: 300px;
    height: 150px;
    position: absolute;
    top: 100%;
    border: 30px solid #000;
    content: '';
    border-radius:0 0 300px 300px;
    border-top: none;
    animation: demo 3s;
    transform-origin: center top;
  }
  .graph:after {
    transform: rotate(150deg);
  }
  
  @keyframes demo {
    0% { transform: rotate(0deg) }
    50% { transform: rotate(180deg) }
  }