.nb-chart[data-flickering="1"] {
opacity: 0;
}
.nb-chart {
display: inline-block;
width: 100%;
}
.nb-chart__svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
} .nb-chart__area {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
animation: nb-chart-reveal calc(var(--nb-chart-duration, 8) * 1s) ease-out forwards;
animation-play-state: paused;
} .nb-chart__line {
stroke: var(--nb-chart-line, #2f9e63);
stroke-width: var(--nb-chart-stroke-w, 2.28);
stroke-linecap: round;
fill: none;
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: nb-chart-draw calc(var(--nb-chart-duration, 8) * 1s) ease-out forwards;
animation-play-state: paused;
} .nb-chart--visible .nb-chart__area,
.nb-chart--visible .nb-chart__line {
animation-play-state: running;
} .nb-chart--loop .nb-chart__area,
.nb-chart--loop .nb-chart__line {
animation-iteration-count: infinite;
animation-fill-mode: none;
} .nb-chart__grad-start {
stop-color: var(--nb-chart-fill, #c3e4c9);
}
.nb-chart__grad-end {
stop-color: var(--nb-chart-fill, #c3e4c9);
stop-opacity: 0;
} @keyframes nb-chart-reveal {
from {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@keyframes nb-chart-draw {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}