はじめにカラフルな線が印象的なアイコンができたので、ラインを描いていくようなアニメーション(ドローアニメーションというのかな?)にしていきます。 最初に見かけた方法はvivusというSVGアニメーションのJavascriptライブラリ。 簡単に手書き風?アニメーションができそうです。 でもvivusはやめました。Javascript重いのでCSSだけでいけるならそのほうが良いですよね・・。ということで調べつつやってみました。 SVGを表示する/mozart.svg(モーツァルトの顔部分) <svg id="icon" xmlns="http://www.w3.org/2000/svg"> . . . </svg> /mozart-text.svg(Wolfgang Amadeus Mozartの部分) <svg id="icon" xmlns="http://www.w3.org/2000
![SVGでCSSアニメーション|sumi|note](https://cdn-ak-scissors.b.st-hatena.com/image/square/7078f7ed7d7dc7b4de98c5a784d4b9b803e37bfe/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F20947006%2Frectangle_large_type_2_0c191c14ec9ddd05529159da4a34bd3a.jpg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)