L@ d}18$X K"Y^ҚTy"a"*z0uN(x`X@-h! (Q2m"?Y.kvb僨_n㺁SAMlWiSYNbid~ddates2023-06-04T23:55:00etitlexdSVGを扱うライブラリSVG.jsをESモジュールとして使うデモアプリ「moyo forked」dtagsh#js #artcurlxhttps://fukuno.jig.jp/3966dbodyy ; C3.jsでSVG(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、いろいろ遊んでみましょう。
cimgxKhttps://img.sabae.cc/data/20230605/f0edc58b-332b-4ed5-b036-9ca2491abd42.jpg