#chart {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 340px;
    height: 340px;
    background: url(../template/images/chart.svg) no-repeat;
    background-size: contain;
}

#chart svg {
    width: 100%;
    height: 100%;
}


.radar_chart_path {
    animation: fill 3s linear forwards;
    stroke: rgba(255, 0, 0, .7);
    stroke-width: 3px;
    stroke-dasharray: 680;
    stroke-dashoffset: 680;
  }

@keyframes fill {
    0% {
    stroke-dashoffset: 680;
    fill-opacity: 0;
    fill: transparent;
    }
    70% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
    fill: transparent;
    }
    85% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
    fill: lightyellow;
    }
    100% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
    }
}