Interactive animated line chart demonstration using pure CSS/SVG animations for data visualization.
<svg viewBox="0 0 800 400" class="w-full h-full">
<path
d="M50,350
c100,-50 150,-50 200,-100
s100,-50 200,-150
s100,50 200,-150"
fill="none"
stroke="#4f46e5"
stroke-width="2"
class="animate-line-grow"/>
</svg>
<style>
@keyframes line-grow {
from { stroke-dasharray: 800, 0;
stroke-dashoffset: 800;
}
to { stroke-dasharray: 800, 0;
stroke-dashoffset: 0;
}
}
.animate-line-grow {
stroke-dasharray: 800;
stroke-dashoffset: 800;
animation: line-grow 3s linear forwards;
}
</style>
Browse other animated data visualization examples.
View More Visualizations