ロゴのしっぽフリフリ

昨年12月にサックを迎えてからあわただしくも楽しく過ごしています
まだまだリュックのことを思い出すと涙が出てきますけど
先日休みの時ふと思っいたってさっそくイラストだけでもリュックを生き返らせようと思い
ロゴのしっぽがフリフリをするよう修正ました

もともとは　SVG(ベクターデータ)で表示させてたのですが gifアニメのように複数枚の画像を用意せずとも SVGを動かすのは 意外と便利で　パスの分割で簡単にCSSで動かすことができました

元の画像(svg)を用意
イラストレーターなどのベクター編集できるアプリでSVGをひらいて 動かしたい起点の部分にパスを追加 私の場合だと赤丸の場所
あとはSVGをHTMLに埋め込むだけ 今回はuseで呼び出すため インラインにSVGを記述

インラインでSVGを埋め込み

<symbol id="s-logo-tail" viewBox="0 0 24 24">
  <g id="tail"><!--しっぽの外枠と黒塗-->
    <path d="~~~~~~~~~~~~~"/> ← ここに動く部分のパスを挿入
  </g>
</symbol>
<!-- 本体 -->
<symbol id="s-logo-body" viewBox="0 0 24 24">
  <g>
    <path fill="#FFFFFF" d="~~~~~~~~~~~~~"/>
    <path fill="#FFFFFF" d="~~~~~~~~~~~~~"/>
    <path d="~~~~~~~~~~~~~"/>
    <path fill="#FFFFFF" d="~~~~~~~~~~~~~"/>
    <path fill="#000000" d="~~~~~~~~~~~~~"/>
  </g>
</symbol>

インラインで埋め込んだ SVGをuse要素で利用

<svg viewBox="0 0 24 24" aria-label="Divertire ロゴ">
  <use href="#s-logo-body" />
  <g id="tail-anim"><use href="#s-logo-tail" /></g>
</svg>

CSSは２行で済み
0.3sでフリフリの速度を変更 transform: rotate(-5deg); }to { transform: rotate(5deg); これでふり幅の変更

#tail-anim {transform-origin: 19px 7px;animation: wag 0.3s ease-in-out infinite alternate;}
@keyframes wag {from { transform: rotate(-5deg); }to   { transform: rotate(5deg); }}

これでちょっと雑ですがちっさいロゴ用なので しっぽフリフリのリュックのログできました！

比較的簡単にできたのですけどSVGのアニメーションはあんまり扱わないので苦戦しました 本格的なアニメーションにも今後挑戦したい