Animated Line Chart

Interactive animated line chart demonstration using pure CSS/SVG animations for data visualization.

0 25 50 75 100

Implementation Example

SVG + CSS
<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>
                

Want to explore more visualization techniques?

Browse other animated data visualization examples.

View More Visualizations