webdevpuneet.com

Related Snippets

93 in Charts category
27–32 of 60

Snap.svg Animated Line Chart

Arc Diagram Chart

Horizon Chart

Wind Rose Chart

Beeswarm Plot Chart

Streamgraph Chart

Snap.svg Animated Line Chart — Self-Drawing Chart Reveal Snippet

Snap.svg Animated Line Chart · Charts · Plain HTML, CSS & JS · Live preview

CategoryCharts
TagsSVGData VisualizationJS Libraries

Copy & paste

Source Code

Requires
JS · snap.svg-min.js
<div class="salc-stage">
  <div class="salc-head">
    <span class="salc-tag">Snap.svg · dash-offset reveal</span>
    <h2>Animated Line Chart</h2>
    <p>The line draws itself in on load, then each data point fades in in sequence.</p>
  </div>
  <div class="salc-card">
    <svg id="salcSvg" viewBox="0 0 480 220" width="100%" height="220"></svg>
    <button class="salc-replay" id="salcReplay">Replay</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Dash-offset draw reveal
stroke-dasharray/dashoffset set to path length create the classic line-draw effect.
Native path length measurement
getTotalLength() measures the exact path length regardless of point count.
Sequenced dot reveal
Data points only start appearing once the line animation completes.
Staggered fade-in
setTimeout delays scaled by index create a left-to-right point cascade.
Auto-scaling data
toPoints() maps arbitrary data ranges to the chart\u2019s pixel bounds.
Replayable animation
A single draw() function both builds and rebuilds the whole chart.
Subtle gridlines
Faint horizontal guides render underneath the line and points.
Snap.svg easing
mina.easeinout and mina.easeout shape the line and dot timing curves.

About this UI Snippet

Snap.svg Animated Line Chart — The Dash-Offset Draw Reveal, Explained

Screenshot of the Snap.svg Animated Line Chart snippet rendered live

The "line draws itself in" effect looks like it must involve some kind of clipping mask or path-length trickery unique to animation libraries, but it's actually a clever repurposing of two ordinary SVG stroke properties: stroke-dasharray and stroke-dashoffset.

Dash arrays are just a repeating on/off pattern

stroke-dasharray normally creates dashed lines by telling the renderer to alternate a fixed length of visible stroke with a fixed length of gap, repeating along the path. The reveal trick sets the dash length to the exact total length of the path:

var len = linePath.node.getTotalLength(); linePath.attr({ strokeDasharray: len, strokeDashoffset: len });

With a dash-and-gap length equal to the whole path, there is effectively only one dash and one gap, each as long as the entire line. getTotalLength() is a native SVG DOM method (called on linePath.node, the raw DOM element Snap wraps) that measures the path's actual on-screen length regardless of how many points or curves it contains.

Offsetting the dash out of view

stroke-dashoffset shifts *where along the path* the dash pattern begins. Setting it equal to the path's own length shifts the single visible dash entirely past the end of the path — so what's actually rendered is 100% gap, and the line appears completely invisible, even though it's technically already drawn.

Animating the reveal

linePath.animate({ strokeDashoffset: 0 }, 1100, mina.easeinout, callback);

As stroke-dashoffset eases from len down to 0, the single dash's starting position slides backward along the path, which has the visual effect of the visible portion growing from the path's start point toward its end — exactly like a pen drawing the line. Snap.svg's .animate() handles interpolating the numeric attribute over the given duration and calls the fourth argument as a completion callback once the tween finishes.

Staggering the data points after the line

The completion callback, revealDots(points), only runs once strokeDashoffset finishes animating to 0 — so the circles never appear before the line has visually "reached" them. Each dot's own .animate({ opacity: 1 }, ...) call is additionally delayed with a plain setTimeout scaled by its index (i * 90ms), producing a left-to-right cascade rather than all eight dots popping in simultaneously.

Why s.clear() at the top of draw()

Because draw() doubles as the replay handler, it needs to remove the previous line, gridlines, and dots before rebuilding them — s.clear() empties the whole <svg> root so each replay starts from a truly blank canvas rather than stacking a second line and a second set of dots on top of the first.

Step by step

How to Use

  1. 1
    Add the Snap.svg CDNInclude snap.svg-min.js from the CDN panel — it attaches a global Snap function.
  2. 2
    Paste HTML, CSS, and JSThe chart draws itself in automatically as soon as the script runs.
  3. 3
    Watch the line revealstroke-dashoffset eases from the path\u2019s length to 0 over 1.1 seconds.
  4. 4
    Watch the points cascade inCircles fade in left to right only after the line finishes drawing.
  5. 5
    Click Replaydraw() clears the SVG and re-runs the whole reveal sequence from scratch.
  6. 6
    Swap in your own dataChange the data array — toPoints() rescales it to fit the chart automatically.

Real-world uses

Common Use Cases

Dashboard KPI charts
Make a line chart draw itself in as a dashboard loads, using stroke-dasharray and stroke-dashoffset animated through Snap.svg.
Landing page growth reveals
Reveal an animated growth chart as a marketing proof point, with data points that only appear once the line has finished drawing.
Teaching SVG dash tricks
Use it as a concrete reference for the dash-offset reveal, including measuring the exact path length with getTotalLength().
Report and summary animations
Animate data visualisations in a summary page, with staggered fade-ins scaled by point index to create a left-to-right cascade.
Presentation-style reveals
Time a chart to draw alongside a speaker's narrative, and use the replay button to rerun the animation on demand during a talk.

Got questions?

Frequently Asked Questions

It sets stroke-dasharray to the path\u2019s exact total length (from getTotalLength()), which makes the dash pattern effectively one dash and one gap the length of the whole line. Setting stroke-dashoffset to that same length shifts the visible dash entirely off the path, so it starts invisible. Animating dashoffset down to 0 slides the visible portion in from the start, reading as a line being drawn.

getTotalLength() is a native SVG DOM method that returns the path\u2019s actual rendered length, accounting for however many points or curve segments it has. Using a fixed guess would either leave a visible dash gap if too short, or not fully reveal the line if too long.

revealDots() is passed as the completion callback to the line\u2019s Snap.animate() call, so it only runs once stroke-dashoffset has finished easing to 0 \u2014 keeping the visual sequence as "line draws in, then points land" rather than everything appearing at once.

Each dot\u2019s animate() call is wrapped in a setTimeout whose delay is the dot\u2019s index multiplied by a fixed interval (90ms), so dot 0 starts immediately, dot 1 after 90ms, dot 2 after 180ms, and so on \u2014 producing a left-to-right cascade.

draw() is reused as the replay handler. Without clearing the SVG root first, each replay would add a second line, second gridlines, and second set of dots on top of the previous ones instead of starting from a blank chart.

Build the path string with C (cubic Bezier) commands instead of L, but the dash-offset reveal technique works identically \u2014 getTotalLength() and stroke-dashoffset operate on the rendered path length regardless of whether it is made of lines or curves.

Design your website