2023-06-04
C3.jsSVG(Scalable Vector Graphics)に触れたので、ライブラリを探してみて発見、SVG.jsインストール方法を見るとESモジュール(esm)の文字!うれしい!


「SVG.js animation demo」

うにょうにょ動くのがかわいいデモをESモジュールで書いてみました。ES-Jamでサクッと動かせます。いろいろ文字を変えたり値を変えたり遊んでみましょう。

SVG.jsは、Starが10.3kと人気なライブラリ。何に使われているかnpmの依存関係で辿って見つけた、「moyo」を動かしてみました。


「moyo - demo」
src on GitHub
どんな模様なのか?CoffeeScriptで書かれたプログラムをcoffeeコマンドでJavaScriptに変換し、ESモジュールになるように変更。requireで読み込んでいた tinycolor は、ESモジュール化されたコード mod.js がGitHub Pagesで公開されていたのでそのまま使用。SVG.jsのバージョンが合わなかったので、SVG ver 2.7.1のコードをESモジュール対応した svg-es を作成して表示できました!コンストラクタのattrsが渡されていないバグを修正し、オプション指定にも対応。


「moyo on ES-Jam」

ES-Jamで動かした様子。2色を自由に指定できます。拡大縮小してもキレイなグラフィック、SVG、いろいろ遊んでみましょう。

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS