För att animera vår SVG behöver vi justera följande delar av SVG i vår CSS – klassen ”.st0” och taggen <path></path>.
Kopiera och klistra in följande kod i din CSS-fil.
Vi kan ställa in färgerna för streck och fyllning i vår SVG i klassen ”.st0” och taggen <path></path>. Vi har ställt in dem här till svart #000. Lägg märke till att vi började med ett vitt streck #FFF och ingen fyllningsfärg. i Adobe Illustrator. Detta gäller för alla egenskaper i SVG, de kan ändras i vår .css-fil.
Detta är resultatet
Du kan absolut anpassa animationen. Observera att vi har använt en cubic-bezier-animation ovan. Här är ett bra ställe att anpassa animationen https://cubic-bezier.com/
Hitta hela koden för vår webbsida nedan
HTML
CSS
Hämta Adobe Illustrator härifrån https://www.adobe.com/products/illustrator.html
Det var allt mina vänner, om ni gillade den här artikeln besök vår Facebook-sida och vår hemsida IRIS WEB CORE.
Och som alltid ha en bra dag!