「SVG - Qiita Advent Calendar 2024 - Qiita」より、「SVGアニメーションで作る!かわいいもふもふキャラクターGIF #Python - Qiita」では、Pythonを使って生成したSVGからアニメーションGIFを生成しています。プログラムでかわいいづくり、良さそうですね!
「かわいいもふもふキャラクターSVG」 src on GitHub
かわいくアニメーションします!
かわいいアニメーションのポイントとなるPythonでのコード
<!-- もふもふ層1 --> {' '.join([f''' <circle cx="{40 * math.cos(i * math.pi / 8)}" cy="{40 * math.sin(i * math.pi / 8)}" r="{15 + fluff_wave + 2 * math.sin(frame_num * 0.2 + i)}" fill="#E6EEFF" stroke="#CFE3FF" stroke-width="2"/> ''' for i in range(16)])}
f""" で囲む、Pythonでのデータ埋め込み用改行付きの文字列、JavaScriptでは ` で囲み、{}の代わりに ${} を使う。mathは、JavaScriptでは標準のMathを使用。for i in range(16) は、range関数を作って、map/joinで対応したのが下記のJavaScriptでのコード。
<!-- もふもふ層1 --> ${range(16).map(i => ` <circle cx="${40 * Math.cos(i * Math.PI / 8)}" cy="${40 * Math.sin(i * Math.PI / 8)}" r="${15 + fluff_wave + 2 * Math.sin(frame_num * 0.2 + i)}" fill="#E6EEFF" stroke="#CFE3FF" stroke-width="2"/> `).join("")}
range関数はこちら
const range = (n) => { const res = new Array(n); for (let i = 0; i < n; i++) res[i] = i; return res; };
楽しい、SVG入門もどうぞ!
「SVG チュートリアル - SVG: スケーラブルベクターグラフィック | MDN」
「Deno - Qiita Advent Calendar 2024 - Qiita」では、deno run コマンドの run がいつのまにか省略できるようになったこと、--allow-read などの替わりに -R が追加されたことを知る。
プログラミング言語としては、Gleamが気になったので、次のGeo3x3移植対象としよう。(Issuesには2023年に掲載済みだった)
楽しく知識のアップデート!