SVG をアニメーション化するには、CSS で SVG の次の部分を調整する必要があります – “.st0” クラスと <path></path> タグ。
次のコードをコピーして、CSS ファイルに貼り付けます。
「.st0」クラスと <path></path> タグで SVG のストロークとフィルの色を設定できます。 ここでは、黒#000に設定しています。 Adobe Illustratorでは、ストロークは白#FFF、フィルカラーは無しでスタートしたことに注意してください。 これはSVGのすべてのプロパティに対して有効で、.cssファイルで変更することができます。
これが結果です


アニメーションを絶対にカスタマイズすることができます。 我々は上記のキュービックベジエのアニメーションを使用していることに注意してください。 アニメーションをカスタマイズするのに適した場所はこちらです https://cubic-bezier.com/
私たちのWebページの完全なコードは以下です
HTML
CSS
ここからAdobe Illustratorを入手 https://www.adobe.com/products/illustrator.html
以上です。もしこの記事を気に入ってもらえたなら、当社のFacebookページとIRIS WEB COREのウェブサイトを見てくださいね
そしていつものように素晴らしい1日を!