Om onze SVG te animeren houden we ons bezig met het aanpassen van de volgende onderdelen van de SVG in onze CSS – de “.st0” klasse en de <path></path> tag.
Kopieer en plak de volgende code in uw CSS bestand.
We kunnen de kleuren van de lijn en vulling van onze SVG instellen in de “.st0” klasse en de <path></path> tag. We hebben ze hier ingesteld op zwart #000. Merk op dat we begonnen met een witte #FFF lijn en geen vulkleur. in Adobe Illustrator. Dit is geldig voor alle eigenschappen van de SVG, ze kunnen veranderd worden in ons .css bestand.
Dit is het resultaat
Je kunt de animatie absoluut naar je hand zetten. Merk op dat we hierboven een kubus-bezier animatie hebben gebruikt. Hier is een goede plaats om uw animatie aan te passen https://cubic-bezier.com/
Vind de volledige code voor onze webpagina hieronder
HTML
CSS
Get Adobe Illustrator van hier https://www.adobe.com/products/illustrator.html
Dat is het mijn vrienden, als je dit artikel leuk vond bezoek dan onze Facebook pagina en onze website IRIS WEB CORE.
En zoals altijd een fijne dag!