Eine beliebte kleine SVG-Animationstechnik ist das Pfadzeichnen. Wenn Sie es sich nicht vorstellen können, hier ist eine Sammlung von einer Million Beispielen, die ich erstellt habe. Im Wesentlichen zeichnet sich der Strich um SVG-Formen im Laufe der Zeit selbst.
Ich habe zuerst davon in Jake Archibalds Artikel Animated line drawing in SVG gehört, der so gute Erklärungen wie möglich dafür liefert. Aber natürlich habe ich auch versucht, meine eigene Erklärung zu geben und wir gehen das in diesem Video durch.
Ich denke, es ist am einfachsten, mit CSS zu beginnen und zu verstehen, wie die Stricheigenschaften auf eine SVG-Form angewendet werden. Wie sie länger werden können und sogar so lang, dass sie die gesamte Form bedecken (oder nicht bedecken). Dann ist das Verschieben, wenn sie so lang sind, die Art und Weise, wie die Zeichnung funktioniert.
Wenn Sie das dann verstanden haben, verstehen Sie, dass JavaScript helfen kann, die Länge der benötigten Striche und Verschiebungen zu berechnen und dies genau richtig zu machen.