Vivus ist eine kompakte JavaScript-Klasse (ohne Abhängigkeiten), mit der Sie SVGs animieren können, sodass sie wie gezeichnet aussehen.Es gibt eine Vielzahl verschiedener Animationen sowie die Möglichkeit, ein benutzerdefiniertes Skript zu erstellen, mit dem Sie Ihre SVG-Datei nach Belieben zeichnen können.Animationsarten • Verzögert: Jedes Pfadelement wird gleichzeitig mit einer kleinen Verzögerung zu Beginn gezeichnet.Dies ist derzeit die Standardanimation.• Synchronisieren: Jede Linie wird synchron gezeichnet.Sie beginnen und enden alle zur gleichen Zeit, daher der Name "Sync".• OneByOne: Jedes Pfadelement wird nacheinander gezeichnet.Diese Animation vermittelt den besten Eindruck vom Live-Zeichnen.Timing-Funktion Um mehr Freiheit zu geben, können Sie die Animation jedes Pfades und / oder der gesamten SVG überschreiben.Es funktioniert ein bisschen wie die CSS-Animations-Timing-Funktion.Anstelle einer Cubic-Bezier-Funktion wird jedoch eine einfache JavaScript-Funktion verwendet.Es muss eine Zahl als Parameter akzeptieren (zwischen 0 und 1) und dann eine Zahl zurückgeben (auch zwischen 0 und 1).Es ist ein Haken.Scenarize Mit dieser Funktion können Sie die Animation Ihrer SVG-Datei skripten.Dazu werden die benutzerdefinierten Werte direkt im DOM der SVG festgelegt.Hier ist ein Beispiel für die Verwendung von Scenario-Sync.Ich würde empfehlen, dass Sie sich den Quellcode und die Readme-Datei für weitere Informationen ansehen.