詩と創作・思索のひろば

ドキドキギュンギュンダイアリーです!!!

Fork me on GitHub

今年の進捗プログレスバーSVG

個人的に一年の様子を Scrapbox に書いているのだけど、今年もけっこう終わりに近づいたなってことを視覚的に知りたいので SVG でプログレスバーを提供することにした( /daiiz/今日 のような感じ )。以下のような感じで今年の進捗が見えてくる。@year_progress リスペクトです。

https://year-progress.motemen.workers.dev/progress.svg?tz=+9

Year Progress SVG

絵心はたいへん低いほうなのでどうやって作るか困っていたが、JS+SVGで液晶画面風の表示をつくる | tech - 氾濫原 を見て Inkscape を使ってみた。これでシャッと描いたあと ブラウザ上でSVGをJSXに変換するWebアプリを作った - wadackel.me で JSX に変換し、preact で XML 化している。この程度の SVG 生成に preact は too much だという向きもあろうけど雑に作り上げるならこのくらいでいい。

とまあ作ってみたけど円グラフめいた形がよかったかなとか色合いはどうなのとかいろいろある。よかったら pull request ください。

GitHub - motemen/web-year-progress

はてなで一緒に働きませんか?