line-draw-animation

name	line-draw-animation
description	Use when revealing illustrative content. Line-draw animations make SVG lines appear as if being drawn live.

Line-Draw Animation

Line-draw = SVG path animation. Stroke-dasharray + stroke-dashoffset creates 'drawing' effect. Used for: hero illustrations, charts, decorative SVG.

CSS line-draw

.line-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease-out forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

The stroke-dasharray value should be approximately the total path length.

SVG getTotalLength()

Programmatic length:

const path = document.querySelector('path');
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;

Use cases

1. Hero illustration drawing in
2. Logo animation (text or shape draws)
3. Decorative dividers (line draws across screen)
4. Chart axes drawing in on scroll
5. Trail effect on cursor (creative interaction)
6. Section transition (drawing line between sections)

Use sparingly — eye-catching, but overuse becomes ornament.

Where this fits in the X3 empire

Used in CardPrepAI hero illustrations for signature reveal.