Chart Draw-In
Animated chart lines that draw themselves in using SVG stroke-dashoffset for engaging data visualization reveals. Perfect for dashboards, reports, or any page where data tells a story through motion.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
chartdrawlinesvgdata
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
Animated chart lines and bars that draw in for engaging data visualization reveals.
CSS
css
.line { width: 280px; height: 80px; }
.line path { fill: none; stroke: #3b82f6; stroke-width: 2; stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<svg class="line" viewBox="0 0 200 80"><path d="M0,60 L50,40 L100,50 L150,20 L200,30"/></svg>Full Source
html
<!DOCTYPE html>
<html><head><style>
.line { width: 280px; height: 80px; }
.line path { fill: none; stroke: #3b82f6; stroke-width: 2; stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body>
<svg class="line" viewBox="0 0 200 80"><path d="M0,60 L50,40 L100,50 L150,20 L200,30"/></svg>
</body></html>