Um unser SVG zu animieren, müssen wir die folgenden Teile des SVG in unserem CSS anpassen – die Klasse „.st0“ und den <path></path> Tag.
Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre CSS-Datei ein.
In der Klasse „.st0“ und dem <path></path>-Tag können wir die Farben für den Strich und die Füllung unseres SVG einstellen. Wir haben sie hier auf schwarz #000 eingestellt. Beachten Sie, dass wir mit einer weißen Kontur #FFF und keiner Füllfarbe begonnen haben. in Adobe Illustrator. Dies gilt für alle Eigenschaften des SVG, sie können in unserer .css-Datei geändert werden.
Das ist das Ergebnis
Sie können die Animation durchaus individuell gestalten. Beachten Sie, dass wir oben eine kubische Bezier-Animation verwendet haben. Hier ist ein guter Ort, um Ihre Animation anzupassen https://cubic-bezier.com/
Finden Sie den vollständigen Code für unsere Webseite unten
HTML
CSS
Holen Sie sich Adobe Illustrator von hier https://www.adobe.com/products/illustrator.html
Das war’s meine Freunde, wenn Ihnen dieser Artikel gefallen hat, besuchen Sie unsere Facebook-Seite und unsere Website IRIS WEB CORE.
Und wie immer einen schönen Tag!