SVG-Strichanimation ist eine jener Techniken, die aus einem statischen Icon eine lebendige Illustration machen. Sie haben diesen Effekt sicher schon gesehen: Ein Logo-Umriss zeichnet sich wie von selbst, als führe ein unsichtbarer Stift die Form von Anfang bis Ende nach. Es sieht hochwertig aus, wird aber mit reinem CSS realisiert.

Das Problem: Die meisten Tutorials bleiben beim einfachsten Fall stehen, ein offener Pfad, eine einzelne Linie, Animation vom Anfang bis zum Ende. Echte Grafiken enthalten jedoch geschlossene Konturen, unterbrochene Formen und Zeichenrichtungen, die der Designer nicht kontrolliert hat. Ein SVG-Pfad kann an einer beliebigen Stelle beginnen, und Sie benötigen ihn so, dass er von einem ästhetisch ansprechenden Startpunkt aus im Uhrzeigersinn zeichnet.

Nachfolgend finden Sie das vollständige Technikset: von der einfachen Animation über Doppellinien bis zur vollständigen Kontrolle über Start- und Endpunkte. Alles in reinem CSS, ohne Bibliotheken oder Laufzeitmessungen. Diese Methoden wurden bei der Entwicklung des SVG Divider Plugins getestet und funktionieren in jedem modernen Browser.

💡 Kurzüberblick:

• Ermitteln Sie die SVG-Pfadlänge per getTotalLength() oder Illustrator und schreiben Sie die Zahl in das CSS.
• Setzen Sie stroke-dasharray: LENGTH und animieren Sie stroke-dashoffset von LENGTH auf 0.
• Um die Richtung umzukehren, vertauschen Sie Strich und Lücke in stroke-dasharray und schieben stroke-dashoffset nach vorn.
• Verschieben Sie den Startpunkt, indem Sie die Hälfte (oder einen beliebigen Bruchteil) der Länge zu stroke-dashoffset addieren.
• Starten Sie eine „Inside-Out"-Animation: beginnen bei HALF_LENGTH, enden bei FULL_LENGTH.
• Richten Sie Doppellinien über halbe Länge in stroke-dasharray und Viertelverschiebung in stroke-dashoffset ein.

Technische Grundlage: Striche, Lücken und Pfadlänge

Im Kern jeder SVG-Animation stehen zwei CSS-Eigenschaften: stroke-dasharray und stroke-dashoffset. Die erste definiert ein „Strich-Lücke"-Muster entlang der Kontur, die zweite verschiebt dieses Muster. Wenn Sie den Strich gleich der gesamten Pfadlänge setzen und dann den Offset animieren, „zeichnet" sich die Linie vor Ihren Augen.

Der entscheidende Schritt vor jeder Animation ist das Ermitteln der vollständigen Pfadlänge. Methoden:

• JavaScript: document.querySelector('path').getTotalLength(), ein Konsolenaufruf, die Zahl wird fest in das CSS geschrieben. Keine Laufzeit.
• Illustrator: Das Bedienfeld „Dokumentinfo" zeigt die Länge des ausgewählten Pfads an.
• Eigenes Skript: Wenn Sie Dutzende oder Hunderte von Pfaden haben, lohnt sich das Schreiben einer automatischen Durchlauf- und Längenauszeichnung.

Wichtige Nuance: getTotalLength() und Illustrator können für denselben Pfad geringfügig abweichende Zahlen liefern. Der Grund ist unterschiedliche Rechengenauigkeit. Die Abweichung liegt üblicherweise innerhalb von 1-2 Einheiten und beeinträchtigt die Optik nicht.

Prüfen Sie die Pfadgeometrie auf Fehler. Zeichenrichtung und Startpunkt hängen davon ab, wie der Designer die Kurve im Editor aufgebaut hat, das ist normal. Im Folgenden lernen Sie, beides zu kontrollieren, ohne das SVG selbst zu bearbeiten.

Einfache Animation: Eine Linie von Anfang bis Ende zeichnen

Einfachster Fall: ein offener Pfad mit einer Länge von, sagen wir, 100 Einheiten. Setzen Sie den Strich auf die volle Länge und animieren Sie den Offset von 100 auf 0:

1
@keyframes reveal {
2
    to {
3
        stroke-dashoffset: 0;
4
    }
5
}
6
svg path {
7
    stroke-dashoffset: 100;
8
    stroke-dasharray: 100;
9
    animation: reveal 1s ease-in-out 0s forwards;
10
}

Was hier passiert: stroke-dasharray: 100 setzt 100 Einheiten durchgezogene Linie und 100 Einheiten Leerraum (der zweite Wert wird standardmäßig auf den ersten gesetzt). stroke-dashoffset: 100 verschiebt das Muster so, dass der sichtbare Teil außerhalb der Pfadgrenzen liegt, die Linie ist unsichtbar. Die Animation reduziert den Offset auf null, und der Strich wandert an seine Position.

Einige praktische Hinweise:

• Ersetzen Sie FULL_LENGTH durch die tatsächliche Zahl ohne Maßeinheit. Die CSS-Engine versteht innerhalb von stroke-dasharray kein px oder em.
• Der Selektor svg path gilt für eine Kontur. Hat das SVG mehrere Pfade, verwenden Sie Klassen, IDs oder Pseudoklassen wie path:nth-of-type(3). Debugging-Werkzeuge: :nth Tester und nthmaster.com.
• Der @keyframes-Name muss für jede Animationsvariante eindeutig sein. Unterschiedliche Pfade benötigen oft eigene Keyframes.
• Vermeiden Sie negative stroke-dashoffset-Werte: Safari kann bei negativen Offsets flackern oder Artefakte zeigen.

Richtung steuern: Die Zeichnung umkehren

Standardmäßig verläuft die Animation vom Pfadanfang zum Pfadende, wo auch immer der Designer die Kurve gezeichnet hat. Oft benötigen Sie jedoch das Gegenteil: eine geschlossene Kontur, die im Uhrzeigersinn statt gegen den Uhrzeigersinn zeichnet.

Die Lösung besteht darin, das Strichmuster zu invertieren: Die Linie beginnt unsichtbar (0 Strich, 100 Lücke) und wird sichtbar (100 Strich, 0 Lücke), während der Offset sie rückwärts zieht:

1
@keyframes reversed {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 0;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 100;
9
    }
10
}
11
svg path {
12
    animation: reversed 1s ease-in-out 0s forwards;
13
}

Die Mechanik funktioniert über die zyklische Natur des Strichmusters: Die durchgezogene Linie materialisiert sich am Pfadende, während ihre Kopie links über den Anfang hinausgeht und unsichtbar bleibt. Dasselbe geschieht bei geschlossenen Konturen: Die Strichkopie erscheint „vor" dem Anfang und stört die Wahrnehmung nicht.

Es gibt einen alternativen Ansatz, kürzer und ohne Array-Manipulation:

1
@keyframes alternative-reversed {
2
    from {
3
        stroke-dashoffset: 100;
4
    }
5
    to {
6
        stroke-dashoffset: 200;
7
    }
8
}
9
svg path {
10
    stroke-dasharray: 100;
11
    animation: alternative-reversed 1s ease-in-out 0s forwards;
12
}

Hier ist stroke-dasharray auf die volle Länge fixiert, während der Offset von 100 auf 200 läuft. Gleiches Ergebnis, die Linie zeichnet in umgekehrter Richtung. Verwenden Sie die Variante, die Ihnen intuitiver erscheint.

Den Startpunkt verschieben

Ein geschlossener Pfad gleicht einer Ringbahn: Der Zug kann an jeder beliebigen Station starten. Die Aufgabe besteht darin, den Animationsstart an einen ästhetisch ansprechenden Punkt zu verlegen, ohne die Geometrie selbst anzutasten.

Von der gegenüberliegenden Seite starten

Bei symmetrischen Konturen genügt ein Offset um die halbe Länge:

1
@keyframes start-from-other-side {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 50;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 50;
9
    }
10
}
11
svg path {
12
    animation: start-from-other-side 1s ease-in-out 0s forwards;
13
}

Die Zeichenrichtung bleibt original, aber optisch beginnt die Animation am entgegengesetzten Ende.

Richtung umkehren und beliebiger Start

Um gleichzeitig die Richtung umzukehren und den Startpunkt zu verschieben, addieren Sie die volle Länge zum End-Offset:

1
@keyframes other-side-and-reverse {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 50;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 150;
9
    }
10
}
11
svg path {
12
    animation: other-side-and-reverse 1s ease-in-out 0s forwards;
13
}

Für einen völlig beliebigen Punkt setzen Sie anstelle von 50 einen beliebigen Wert ein. Durch Ausprobieren (plus/minus 5 bis 10 Einheiten) findet man die optimale Position. In einem Projekt wurde der Startpunkt auf einem Twitch-Bit-Icon um 17 Pixel verschoben, eine unschöne Zahl, aber optisch perfekt.

„Inside-out"-Animation

Die Linie wächst von der Mitte aus gleichzeitig in beide Richtungen, eine klassische Technik für Logos und Infografiken:

1
@keyframes inside-out {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 50;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 100;
9
    }
10
}
11
svg path {
12
    animation: inside-out 1s ease-in-out 0s forwards;
13
}

Der Offset beginnt bei der halben Länge (Pfadmitte) und läuft bis zur vollen Länge, wobei er den Strich mitzieht. Bei asymmetrischen Formen kann der Startpunkt zusätzlich verschoben werden:

1
@keyframes custom-inside-out {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 84;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 134;
9
    }
10
}

Hier ist 84 = HALBE_LÄNGE + 34. Die Konstante 34 ist manuell für eine bestimmte Form gewählt. Es gibt kein Universalrezept: ausprobieren, anschauen, justieren.

„Outside-in"-Animation: Doppelter Stift

Der umgekehrte Ansatz: Die Linie zeichnet von beiden Enden gleichzeitig und läuft in der Mitte zusammen. Auf offenen Konturen ergibt das einen „Zwei-Stifte"-Effekt:

1
@keyframes outside-in {
2
    from {
3
        stroke-dasharray: 0 100;
4
    }
5
    to {
6
        stroke-dasharray: 50 0;
7
    }
8
}
9
svg path {
10
    animation: outside-in 1s ease-in-out 0s forwards;
11
}

Der Strich erreicht nur die halbe Länge, die Lücke schließt sich doppelt so schnell wie bei der Basisanimation. stroke-dashoffset wird hier nicht benötigt: Das „0-Lücke"-Muster im Endzustand sorgt von selbst dafür, dass beide Strichhälften zusammenlaufen.

Volle Kontrolle: Start- und Endpunkte

Wenn eine Richtung und ein Startpunkt nicht ausreichen, können Sie beide Zeichengrenzen steuern. Zwei bewegliche Linienköpfe laufen auf ein gemeinsames Ziel zu:

1
@keyframes custom-start-end {
2
    from {
3
        stroke-dasharray: 0 100;
4
        stroke-dashoffset: 30;
5
    }
6
    to {
7
        stroke-dasharray: 100 0;
8
        stroke-dashoffset: 80;
9
    }
10
}
11
svg path {
12
    animation: custom-start-end 1s ease-in-out 0s forwards;
13
}

Die Werte 30 und 80 sind willkürlich; from-Offset kleiner als to-Offset ist die einzige feste Regel. Liegen die Punkte nah beieinander, fliegt das eine Segment schnell, das andere kriecht langsam, das ist normal und sogar schön.

Scheuen Sie sich nicht, beim to-Wert über die volle Länge hinauszugehen. stroke-dashoffset: 130 bei einer Länge von 100 ist zulässig, es verschiebt den Strichzyklus lediglich in die zweite Runde. Die Hauptsache ist, negative Werte zu vermeiden.

Doppellinien und Spezialeffekte

Der flexibelste Modus: Striche mit halber Länge und Viertelversatz. Jeder Pfad erhält zwei Linienköpfe, die sich unabhängig voneinander bewegen:

1
@keyframes double-lines {
2
    from {
3
        stroke-dasharray: 0 50;
4
        stroke-dashoffset: 25;
5
    }
6
    to {
7
        stroke-dasharray: 50 0;
8
        stroke-dashoffset: 50;
9
    }
10
}
11
svg path {
12
    animation: double-lines 1s ease-in-out 0s forwards;
13
}

Bei komplexen Formen kann das Strich-Array aus mehreren Komponenten bestehen. Die Summe aller Array-Werte sollte der vollen Länge entsprechen. Reales Beispiel für ein Unendlichkeitszeichen:

1
@keyframes infinity-double-lines {
2
    from {
3
        stroke-dasharray: 0 53 0 47;
4
        stroke-dashoffset: 37;
5
    }
6
    to {
7
        stroke-dasharray: 53 0 47 0;
8
        stroke-dashoffset: 60;
9
    }
10
}
11
svg .infinity {
12
    animation: infinity-double-lines 8s ease-in-out 0s alternate infinite;
13
    stroke: #8D69D8;
14
}

Vier Array-Komponenten (53 + 47 = 100 = volle Länge) tauschen zwischen from und to die Plätze. Die Animation läuft in Schleife (infinite) und kehrt um (alternate), wodurch eine meditative, atmende Kontur entsteht, die sich nie identisch wiederholt.

Video: SVG-Animation in der Praxis

Um alle beschriebenen Techniken live zu sehen und die Setup-Nuancen zu verstehen, sehen Sie sich dieses englischsprachige Tutorial an:

Der Autor zeigt Schritt für Schritt die Erstellung einer animierten SVG-Illustration, vom Export aus Figma bis zu den finalen CSS-Anpassungen. Zeitmarken in der Beschreibung ermöglichen es Ihnen, direkt zum gewünschten Abschnitt zu springen.

⁉️🤔 Häufig gestellte Fragen

Warum die Pfadlänge im Voraus kennen, wenn es getTotalLength() gibt?

getTotalLength() ist JavaScript, und unser Ziel ist reines CSS ohne Laufzeitabhängigkeiten. Sie messen die Länge EINMAL (in der Konsole oder in Illustrator), hinterlegen den Wert fest im CSS, und die Animation funktioniert ohne eine einzige Zeile JS.

Kann man mehrere Pfade mit einer Animation animieren?

Ja, wenn sie die gleiche Länge und das gleiche gewünschte Verhalten haben. In der Praxis stimmen Pfade selten überein, es ist einfacher, jedem seine eigenen @keyframes zu geben oder CSS-Variablen mit unterschiedlichen Längenwerten zu verwenden.

Warum flackert Safari bei negativem stroke-dashoffset?

Es handelt sich um einen bekannten WebKit-Rendering-Bug: Negative Offset-Werte werden manchmal als sofortiger Reset auf 0 interpretiert. Die Lösung besteht darin, stroke-dashoffset stets ≥ 0 zu halten. Wenn Sie eine Verschiebung benötigen, addieren Sie die volle Länge, anstatt ins Negative zu gehen.

Was tun, wenn die Animation am Anfang oder Ende „ruckelt"?

Fügen Sie forwards zur animation hinzu (bewahrt den Endzustand) und entfernen Sie alternate, wenn Sie keine Umkehrung benötigen. Prüfen Sie außerdem auf Konflikte mit anderen CSS-Regeln für dasselbe Element, zum Beispiel transition auf derselben Eigenschaft.

Funktioniert das mit stroke-dasharray bei geschlossenen Konturen mit komplexer Geometrie?

Ja, die Mechanik ist für alle SVG-Pfade identisch, gerade Linien, Bézierkurven, geschlossene Polygone. Der einzige Unterschied besteht darin, dass es bei einer geschlossenen Kontur keinen visuellen „Anfang" und kein „Ende" gibt, weshalb die Kontrolle des Startpunkts für die Ästhetik besonders wichtig ist.

Lohnt es sich, Animationen manuell zu schreiben, wenn es Bibliotheken gibt?

Kurze Antwort: Es hängt vom Umfang ab. Für ein einmaliges Icon auf einer Landingpage liefert die manuelle Kontrolle perfekte Ergebnisse ohne zusätzliche Abhängigkeiten. Fünfzehn Minuten, um einen Offset zu justieren, und die Kontur zeichnet sich exakt so, wie Sie es beabsichtigt haben, und nicht so, wie der Bibliotheksentwickler es entschieden hat.

Als wir SVG-Divider für Elementor erstellt haben, hat sich die manuelle Kontrolle dreifach ausgezahlt. Das Plugin verwendet Dutzende animierter Divider, jeder mit individuell abgestimmten Strichen. Keine Bibliothek würde eine solche Kontrolle über die Ästhetik bieten.

Zusätzlich zu den Techniken aus diesem Artikel können Sie Folgendes darüberlegen:

• Steuerung des Animationszustands per JavaScript (Start/Stopp/Neustart);
• Verzögerter Start per Intersection Observer, die Kontur zeichnet sich erst, wenn sie in den Viewport gelangt;
• Animationsketten per animation-delay;
• Benutzerdefinierte Beschleunigungsfunktionen (cubic-bezier());
• Zusätzliche Arbeit mit der Deckkraft in @keyframes;
• Elastische Animation gestrichelter Linien („laufende Ameisen").

Nehmen Sie die Blaupausen aus diesem Artikel als Grundlage, setzen Sie Ihre Längenwerte ein und experimentieren Sie mit cubic-bezier(). Eine richtig gewählte Beschleunigungsfunktion verändert die Wahrnehmung der Animation stärker als eine Verschiebung des Startpunkts um ein paar Pixel.