SVGを使って、HTMLとCSSだけで可愛いロゴのアニメーション

Illustratorで作ったロゴを、WEBサイトでアニメ―ションして表示させる。

See the Pen SVG by s w (@s-w-the-scripter) on CodePen.

まずはイラストレーターからsvgのソースをゲットする。

別名で保存＞ファイルの種類をSVGにして保存を押すとここからゲットできる。

このコードをコピーして貼り付けると、静止画が完成。

CSSは、イラレで生成された

.st0{fill:#EB5E00;}
.st1{fill:#E8380D;}

に合わせて作成。
色が多いほど増えるので、合わせて作成する。
CSSはこんな感じ。

.st0{
  stroke:#EB5E00;　/*線の色*/
  stroke-dasharray: 2000;　/*破線の間隔*/
  stroke-dashoffset: 0;　/*破線の開始位置*/
  stroke-width: 1;　/*線の太さ*/
  animation: funsun 4s ease-in 0s;
}
  @keyframes funsun {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      40% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#EB5E00;　/*塗りの色*/
      }
    }