Handschrift: SVG-Animation CodePen Ex: 1
Handschrift: SVG-Animation CodePen Ex: 2
Ich versuche herauszufinden, wie der obige "Handschrift" -Effekt mit SVG-Pfad und CSS erreicht wurde. Ich habe mir den HTML-Code angesehen und ihn auch in Illustrator importiert, um herauszufinden, was passiert. Ich bin neu bei Illustrator und mein Ziel ist es, dies in Illustrator mit einer anderen Schriftart neu zu erstellen.
Mein bisheriges Verständnis: Der Text, die Pfade und die Umrisse wurden erstellt. Dann wurde etwas namens a clip-pathdurch den gesamten Text gezogen. Irgendwas mit Masken? Wenn Sie den strokeClip-Pfad animieren, füllt er alle Textstellen aus.
Wie erstellen Sie diesen Effekt in Illustrator? Erstelle ich einfach zuerst mit dem Stiftwerkzeug einen normalen Pfad und konvertiere ihn dann? Und wie würden Sie die Ebenen organisieren?
Bearbeiten: Viele Beispiele für SVG-Textanimationen im Web animieren die Umrissstriche einer Schriftart. Hier wird nur ein Strich animiert, der sich durch ein Objekt bewegt und die Zwischenräume ausfüllt, während er sich in einer linearen Animation vorwärts bewegt.
Gelöst...
Schritt 1: Erstellen Sie ein Objekt, einen Text, ein Quadrat, einen Kreis usw. Wenn es sich um Text handelt, stellen Sie sicher, dass Sie ihn in einen Umriss konvertieren.
Schritt 2: Zeichnen Sie auf einer Ebene unter dem Objekt einen Strich.
Schritt 3: Markieren Sie Objekt und Strich, stellen Sie sicher, dass sich das Objekt darüber befindet. Gehen Sie zu Objekt, Beschneidungspfad und dann zu machen. Sie sollten das Objekt jetzt mit dem Strich ausfüllen können.
Schritt 4: Animieren Sie den Strich.
Luciano
Zach Saucier
Luciano
Joel Hölting