手描き風のSVGアニメーションを簡単に作成できる無料Webツール「Stroke」が公開された。ロゴ、サイン、イラストなどに手書きで描かれていくようなアニメーション効果を付けることができる。
Strokeの使い方は非常にシンプルである。キャンバス上に直接描画すると、ツールが自動的にReactおよびNext.jsで使用可能なコンポーネントコードを生成する。ユーザーは生成されたコードをコピーし、自身のプロジェクトに貼り付けるだけでアニメーションを実装できる。
生成されるコンポーネントはカスタマイズにも対応している。classNameプロップでサイズを調整したり、colorプロップで色を変更することが可能だ。アニメーションの実行にはMotionライブラリを使用しており、滑らかな描画エフェクトを実現している。
開発者のAbhishek氏が個人プロジェクトとして公開したこのツールは、Product Huntでも紹介され注目を集めている。ソースコードはGitHubで公開されており、無料で利用できる。Webサイトのロゴアニメーションや、署名のモーショングラフィックスなど、手描き感を演出したい場面で活用できそうだ。
