This effect is free — the SVG category contains 30 effects total, including 3 free. Effect.Labs has 840 vanilla effects. Explore the category →

View in catalogue Free account: live preview + 1 free effect

Usage examples

Zone 407:42

152bpm

32:146.2 km

Cardélys

Session in progress

Intervals 6 × 800 m

Rep 4 of 6 · 440 m to go

Pace4'05"/km

Max161 bpm

Rest1:12

Calories418

① Heart trace running across a sports watch face (Cardélys)

WhenDuring an interval session, the watch face shows the effort zone, beats per minute and the timer; under the number, an ECG trace draws itself and fades out over and over.

WhyThe draw-and-erase cycle recalls a heart monitor and shows the reading is live, without adding one more number to a screen a few centimetres wide.

SettingsPath replaced by a heartbeat wave (viewBox 150×50), pink #ff5a76 stroke of 2.4, 1.8 s cycle, transparent 50 px-tall frame (--lnd-bg: transparent, --lnd-height: 50px).

Sprinelle Rates Businesses Become a rider

Bike couriers

Your parcels delivered by bike in 25 minutes

Pickup and drop-off anywhere downtown, Monday to Saturday, 8 am to 8 pm.

See rates

② Bike courier route drawn behind the top of a home page (Sprinelle)

WhenOn a stylised city map, the route of a parcel draws from point A to point B along the streets, holds for a moment, then fades; the headline and the booking button sit in a panel on the left.

WhyA route being drawn tells the service (pick up, deliver) better than a photo, and the erase restarts the story each time the eye comes back.

SettingsRoot laid on a 920×420 px map pinned to the right edge of the scene (--lnd-size: 920px, --lnd-height: 420px, viewBox 920×420), path running along the grid streets, yellow #ffcc33 stroke of 5, 5 s cycle, transparent background. The map, the A and B markers and the text panel are drawn by the page.

9:41100%

Clavendre

Draw your pattern

Watch, then do the same

Step 1 of 2

Password vault

A pattern instead of a six-digit code

1Link at least 4 dots
2Keep your finger on the screen
3Draw it again to confirm

③ Unlock pattern shown before the user copies it (Clavendre)

WhenWhen creating an account in a password app, the nine-dot grid shows the expected gesture: the line links four dots in an N, fades and starts again; "Show again" restarts it from the beginning.

WhyDrawing it step by step gives the order of the dots, which a still picture of the pattern cannot, and the repeat leaves time to memorise it.

SettingsPath M25,125 L25,25 L125,125 L125,25 laid over the grid (dots at 25, 75 and 125), green #34d399 stroke of 6, 3.2 s cycle. The button hides then shows the root again, which restarts the CSS animation.

How it works

The drawing is a single <path> (class .lnd-path) inside a 150×150-unit SVG. The pathLength="100" attribute rescales its length to 100 whatever its real size, so a 100-long dash (stroke-dasharray: 100) covers the whole path, and shifting that dash with stroke-dashoffset is enough to show or hide the stroke.

The lndDraw animation (3 s, looping, ease curve) moves the offset from 100 (nothing visible) to 0 (full stroke) during the first 45% of the cycle, holds it at 0 until 55%, then pushes it to −100: the stroke disappears from its starting point, in the direction it was drawn. The shipped path holds two broken lines (two M commands); the dash restarts at the beginning of each, so they draw together and the shorter one is complete before the other.

For your own shape, replace the d attribute (and the viewBox if it overflows 150×150) and keep pathLength="100": the cycle stays right whether the path is 40 or 4,000 units long. No JavaScript, no interaction; the .fx-0599-root frame is 250 px tall on a midnight-blue background, both adjustable through variables.

Accessibility

Decorative by default: the SVG carries aria-hidden="true". If the line stands for data (a heart rate, a journey), write that data as text next to it: screen readers will read the text, not the line.
Reduced motion: with prefers-reduced-motion: reduce, the animation is removed and the line stays fully drawn (measured in Chromium, Firefox and WebKit: no running animation, identical image 0.7 s apart).
No interaction: nothing to hover, click or reach with the keyboard; the effect behaves the same with a mouse, a finger or a keyboard.
Contrast: the #6366f1 indigo reaches 3.9:1 on the shipped background and 4.5:1 on white, above the 3:1 minimum for a graphic element.

Browser compatibility

Pure CSS. pathLength applies to dashes since Chrome 50, Firefox 6 and Safari 14; the reduced-motion rule needs Chrome 74, Firefox 63 and Safari 10.1. Measured in Chromium 151, Firefox 153 and WebKit 26.5: 0 errors, two independent copies, nothing overflowing at 390 px.

Chrome 74+✓ Full (measured)

Firefox 63+✓ Full (measured)

Safari 14+✓ Full (measured in WebKit 26.5)

Edge 79+✓ Full (Chromium engine)

Safari iOS 14+✓ Full (WebKit engine, not tested on a device)

Chrome Android 74+✓ Full (Chromium engine)

Before Safari 14, pathLength is ignored for dashes: the stroke draws in pieces. Without CSS animations, the line simply shows, complete.

The code

Copy the two blocks (HTML and CSS) into your page. No JavaScript, no dependencies.

HTML

<div class="fx-0599-root">
  <svg class="lnd-svg" viewBox="0 0 150 150" aria-hidden="true">
    <path class="lnd-path" pathLength="100" d="M20,75 L50,30 L80,60 L110,20 L130,50 M20,130 L60,90 L100,110 L130,80"/>
  </svg>
</div>

CSS

.fx-0599-root,.fx-0599-root *,.fx-0599-root *::before,.fx-0599-root *::after{box-sizing:border-box}
.fx-0599-root{--lnd-color:#6366f1;--lnd-stroke:3;--lnd-size:150px;--lnd-speed:3s;--lnd-repeat:infinite;--lnd-bg:rgb(26,26,36);--lnd-height:250px;display:flex;align-items:center;justify-content:center;width:100%;position:relative;color:#fff;font-family:sans-serif;height:var(--lnd-height);overflow:hidden;background:var(--lnd-bg)}
.fx-0599-root .lnd-svg{display:block;width:var(--lnd-size);max-width:100%;height:auto}
.fx-0599-root .lnd-path{fill:none;stroke:var(--lnd-color);stroke-width:var(--lnd-stroke);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;animation:lndDraw var(--lnd-speed) ease var(--lnd-repeat) both}
@keyframes lndDraw{0%{stroke-dashoffset:100}45%,55%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@media (prefers-reduced-motion:reduce){.fx-0599-root .lnd-path{animation:none}}

JavaScript

Pure CSS — no JavaScript needed.

Customize

Options passed to the API or data-* attributes:

Option / property	Default	Effect
Path `d` (and `viewBox`)	two broken lines in 150×150	The drawn shape. Keep `pathLength="100"` on the path so the cycle stays right.
`--lnd-color`	`#6366f1`	Stroke colour.
`--lnd-stroke`	`3`	Stroke width, in `viewBox` units (it grows with the drawing).
`--lnd-speed`	`3s`	Length of a full cycle: draw, pause, erase.
`--lnd-repeat`	`infinite`	Number of cycles. `.5`: the line draws once and stays on screen; `1`: it draws, erases and does not come back.
`--lnd-size`	`150px`	Drawing width; the height follows the `viewBox` proportions. `100%` fills the frame.
`--lnd-height` and `--lnd-bg`	`250px` and `rgb(26,26,36)`	Frame height and background; `transparent` to lay the line over your own artwork.

FAQ

How do I draw the line once and leave it on screen?

Set --lnd-repeat: .5 on .fx-0599-root: the animation stops halfway through its cycle, when the line is complete, and it stays on screen. To replay it, hide then show the root again.

Why is one of my lines complete before the other?

The dash restarts at the beginning of each subpath (each M): the lines start together and the shorter one finishes first. To make them follow each other, join them into one continuous stroke or use two paths with different durations.

Can I reuse a path exported from a vector drawing app?

Yes: copy the path's d attribute and its viewBox. The path must be an outline (not a filled shape); if the export holds several paths, give each one the lnd-path class and pathLength="100".