「SVG のパーツコードジェネレータ」を作りました


HTML埋め込み用の、SVGのパーツのコードを生成するジェネレータです。

SVG のパーツコードジェネレータ

全体像は、こんな感じ。

SVG要素の設定と、プレビュー、
パーツの設定・ストックと、コードプレビューです。

各パーツの基本的な設定値を変更しながら、
表示とコードを確認できるので、
簡単な図形ぐらいは描けると思います。

a b c

SVGの勉強などに使ってもらえればと思います。

ドーナツグラフとか、円弧使うと描けます。
透過とシャープなラインだけで結構オシャレ。(私の感性って、チョロい)

中心点を固定して、円弧をずらすだけ。ちなみに、このグラフはOSのプロダクトのシェア率。

プロダクト 2016年11月シェア率 開始角 内角
Windows 90.95% 0 360 / 100 * 90.95 ≈ 329
Mac 6.74% 329 360 / 100 * 6.74 ≈ 23
Linux 2.31% 329 + 23 = 352 360 / 100 * 2.31 ≈ 8

Javascript を併用する動的な表現も勉強しないとな、と。。。