Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
Data✨ Premium

Line Chart Draw

SVG line chart that draws itself from left to right as it comes into view, with a tinted area fading in and a glowing dot lighting up on each point as the stroke passes.

SVGPath

Updated

Line Chart Draw — preview ▶ Free account: live preview + 1 free effect

This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Data has 28 effects, including 1 free. Explore the category →

View in catalogue

3 usage examples

Elevation profile of a hiking loop, drawn as you scroll down the trail page — Line Chart Draw example 1

① Elevation profile of a hiking loop, drawn as you scroll down the trail page

WhenA trail page on a hiking site: below the illustration and key figures (14 km, 420 m of climb, 4 h 30), the “Elevation profile” section spans the full width. Scrolling down, the stroke leaves the start, climbs to the high point at km 7 and comes back down. In the capture the page scrolls by itself.
WhyHikers read the difficulty in the shape of the line: where it climbs and for how long. The progressive drawing walks the eye round the loop in the right direction.
Settings13 altitudes from 820 to 1,240 m, data-min="820" and data-max="1240" to match the markers written on the left, data-unit="m", --lcd-height: 150px, --lcd-max-width: none, gradient from green #2f7d4f to brown #c2410c.
Six hours of greenhouse temperature, opened by tapping its tile — Line Chart Draw example 2

② Six hours of greenhouse temperature, opened by tapping its tile

WhenA community garden's sensor app: a column of tiles (greenhouse, beds, rain tank, compost) and an empty detail panel. Tapping the “Greenhouse” tile shows the panel; the curve from 10 am to 3 pm then draws itself under the peak, current and lowest values.
WhyThe tile's number gives the state, the curve gives the trend: the greenhouse went past the vent threshold around 1 pm. Drawing starts as the panel opens, right in front of the person who tapped.
SettingsSix values (14 to 25 °C), data-unit="°C", data-labels with the hours for the spoken description, --lcd-height: 132px, gradient from blue #3b82f6 to orange #ea580c; the panel is a hidden removed on click.
Progress mini chart inside the “new record” notification at the end of a run — Line Chart Draw example 3

③ Progress mini chart inside the “new record” notification at the end of a run

WhenA running app at the end of a session: the “Finish run” button slides a notification in at the top, with the new 5 km record and, on the right, a 44 px tall curve rising over the last six runs.
WhyThe curve drawing itself extends the good news: speed has improved for six runs. At notification size it reads in a second.
SettingsSix average speeds (10.8 to 12.4 km/h), data-unit="km/h", --lcd-height: 44px, --lcd-max-width: none, --lcd-min-height: 0, green dots (--lcd-dot: #16a34a) on a light background.

How it works

Everything is set on the .fx-0226-root root: data-values (comma-separated numbers) and, optionally, data-labels, data-title, data-unit, data-min and data-max. The script builds an SVG inside .lcd-chart at the container's real size: an .lcd-area, an .lcd-line and one .lcd-dot per value. Both gradients get an id unique to each copy, so a chart hidden in a tab cannot wipe out another one's colours.

The vertical scale runs from the smallest to the largest value, widened by 10% on each side so the line does not touch the edges; data-min and data-max pin it. Points are evenly spaced across the full width with an 8 px margin. A ResizeObserver recomputes the path when the width changes, without replaying the animation.

When at least 35% of the chart is visible, the lcd-on class starts three animations, once: the stroke goes from a stroke-dashoffset equal to its length down to 0 in 2 s (ease-out), the area fades in over 1 s from 1 s, and each dot lights up in 0.5 s with a delay proportional to its position along the line. Dots therefore light up in order, right after the line passes, the last point included.

Accessibility

  • Text alternative: .lcd-chart has role="img" and the script gives it an aria-label built from the data, e.g. “Site visits over six months. Jan 1,200, Feb 2,100…”. The SVG itself is hidden from screen readers.
  • Localised numbers: the values in that description are written with Intl.NumberFormat in the page language, with the data-unit unit.
  • Reduced motion: under prefers-reduced-motion: reduce, the whole line, the area and every dot are shown at once.
  • No interaction: nothing focusable, nothing on hover or touch. To read an exact value on screen, add your own labels around the chart.

Browser compatibility

SVG built in JavaScript (IntersectionObserver, ResizeObserver, Intl.NumberFormat) and CSS animations on stroke-dashoffset and opacity. Measured on 8 Nov 2026 in Chromium 151, Firefox 153 and WebKit 26.5 (Playwright): two independent copies, the second only draws once shown, reduced motion, 390 px wide, no errors.

Chrome 74+✓ Full (measured in Chromium 151)
Firefox 69+✓ Full (measured in Firefox 153)
Safari 13.1+✓ Measured in WebKit 26.5, not in real Safari
Edge 79+✓ Full (Chromium engine)
Safari iOS 13.4+✓ Not checked on a device
Chrome Android 74+✓ Full (Chromium engine)

Without ResizeObserver, the line is computed at start-up and when it appears but no longer follows width changes. Without JavaScript the area stays empty: provide fallback text if the chart carries essential information.

The code

HTML structure to paste into your page (the CSS + JS come with your purchase):

index.html — structure 
<div class="fx-0226-root" data-title="Site visits over six months" data-labels="Jan,Feb,Mar,Apr,May,Jun" data-values="1200,2100,1650,3400,2800,3900">
  <div class="lcd-chart" role="img"></div>
</div>

One-time payment, no subscription — the code is yours forever

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
Values (HTML — data-values on the root) 1200,2100,1650,3400,2800,3900 At least two comma-separated numbers, decimal point; a dot is drawn for each.
Labels and title (HTML — data-labels, data-title) Six months, “Site visits over six months” Only used for the description read by screen readers; nothing is written on screen.
Unit (HTML — data-unit) None Appended after each number in the description (% gives a localised percentage).
Scale (HTML — data-min, data-max) Smallest and largest value, ±10% Pin them to line the curve up with your own markers or to compare two charts.
Colours (CSS — --lcd-from, --lcd-to, --lcd-area) #6366f1 → #d946ef, area rgba(99, 102, 241, .3) Horizontal gradient of the stroke and tint of the area (which fades out downwards).
Dots (CSS — --lcd-dot, --lcd-glow) #fff, glow rgba(99, 102, 241, .8) Colour of the dots and of their glow.
Size and background (CSS — --lcd-height, --lcd-max-width, --lcd-min-height, --lcd-bg) 180 px, 560 px, 300 px, #0a0a0f Chart height, maximum width, minimum root height, background (transparent on a light site).

FAQ

The effect focuses on the line. Axes depend too much on each page (units, language, number of ticks): place your labels in HTML around .lcd-chart. Points are spread evenly with an 8 px margin, so a row of labels in justify-content: space-between lines up with them.
Yes: the scale starts from the smallest value, whatever it is. The area always fills down to the bottom of the chart, not to zero.
The path is recomputed at the new width and stays fully visible; the animation itself is never replayed.