最近やっとSVGを触り始めた初心者です。
メインビジュアルがさみしいなと思った時になんかできないかなと思った時に見つけたのがこれです。
SVGのアニメーション。
これ、adobe Illutratorがあれば超簡単にできるのでおすすめです。
adobe Illustratorで簡単にSVGアニメをつくる
まずはadobe Illustratorで画像を作成
まずはadobe Illustratorでアニメ化したい文字のデータをつくります。
アウトライン化します。
ツールバーの「ウインドウ」から「アセットの書き出し」を選択して、アセット書き出しウィンドウを表示させます。
書き出しの設定で「SVG」を選択。
アウトライン化したデータをグループごとアセット書き出しウィンドウにドラッグします。
「書き出し」を行います。
SVGデータが書き出されています。
テキストエディタで開きましょう。
書き出されたデータはこんな感じ。
データをちょっと編集
テキストエディタで開いたらちょこちょこちょこと編集します。
あとでCSSでいろいろ調整するのでIDなどを分かりやすい名前にしておきます。
不要な部分もちょちょっと削除。
で、こんなかんじに。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -2 726 116"> <g id="svglogo" data-name="svglogodata"> <path d="M100.66,7.31l-12,34.46q-11.82-16-27.15-16-8.52,0-8.53,6.45,0,2,2.69,4.08t14.08,6.52a139.39,139.39,0,0,1,19.31,9A26.61,26.61,0,0,1,99.15,62.19a30.64,30.64,0,0,1,3.37,14.68q0,17.56-13.32,26.76T50,112.84q-29,0-50-8.24L11.82,68.06A40.43,40.43,0,0,0,24.61,80.81q7.63,4.74,14.65,4.73A9.15,9.15,0,0,0,45,83.75a5.35,5.35,0,0,0,2.33-4.37,6.59,6.59,0,0,0-2.26-4.66q-2.26-2.22-11.93-6.16A113,113,0,0,1,18.7,61.72a31,31,0,0,1-10-9.49Q4.51,46.07,4.51,36.68q0-18.19,13.26-27.44T56.88,0A127.41,127.41,0,0,1,100.66,7.31Z"/> <path d="M151.93,111.05H103.5l38-109.33h69l38,109.33H200.07l-6.3-18.49H158.23ZM167,66.77H185L176,39.62Z"/> <path d="M257.6,111.05V1.72h47L324.37,24.5,344.21,1.72h46.93V111.05H342.71V56.31L324.37,77.45,306,56.31v54.74Z"/> <path d="M411.9,1.72h66.27q21,0,32.24,10.64a34.78,34.78,0,0,1,11.25,26.33A35.64,35.64,0,0,1,511,64.77a35,35,0,0,1-25.72,10.74q-12.54,0-25-9.53v45.07H411.9Zm48.36,23.64V49.15a15.68,15.68,0,0,0,4,.57,11.78,11.78,0,0,0,8.81-3.44,12.33,12.33,0,0,0,3.37-9q0-5.51-2.87-8.7c-1.91-2.12-4.63-3.19-8.16-3.19Z"/> <path d="M531.93,111.05V1.72h48.43V83.61h42.42v27.44Z"/> <path d="M723.2,83.61v27.44H632.43V1.72H723.2V29.16H680.79V42.7H710.3V70.14H680.79V83.61Z"/> </g> </svg>
あ、このコードを貼りつけただけでもちゃんとSVG画像が表示されますよ。動かないけど。
CSSで調整
ふちどりが描画されるアニメーションをつけていきます。
WEBクリエイターボックスさんの「SVGでアウトラインをカスタマイズしてみよう」を参考にしました。
#svglogo { fill: none; stroke: #000; stroke-width: 3; stroke-dasharray: 1000; stroke-dashoffset: 1000; -webkit-animation: line 8s linear forwards; animation: line 8s linear forwards; } @-webkit-keyframes line { to { stroke-dashoffset: 0; } } @keyframes line { to { stroke-dashoffset: 0; } }
これ、イラストでやってもおしゃれなんでぜひぜひ!
※止まっていたらリロードしてみてください
adobe Illustratorで簡単にSVGアニメをつくる まとめ
簡単なのにおっしゃれーでわりとどんなサイトにも相性良くて最近多用しています。
技術についていくのが遅くて申し訳ない…。
この記事は以下の記事を参考にしました。
ビジュアルエディタとテキストエディタを切り替えるとタグが消える問題について
WordPressあるあるのこの問題、SVGタグもごっそり消えることがあるのでみなさんお気をつけて…!!!
今回の記事書くときにも焦りました。
対処法の参考記事はこちら。
コメント