SVGでは、アニメーションのための要素があります。今回は、そのひつとである「animate要素」について見ていきます。animate要素は、要素の属性値を変化させてアニメーションさせるものです。例えば、色や不透明度を変更してアニメーションさせます。 animate…

線の端点と接続点の形状を指定する属性があります。線の端の処理をどのようにするのかを指定できます。合わせて破線の指定の仕方を見ていきます。線の細部の扱いまで細かく指定できます。小さいことかもしれませんが、見た目の印象が変わります。 端点の形状…

要素が持つtransform属性に対して、変換を指定します。変換には「移動」「拡大・縮小」「回転」「剪断」があります。それぞれ、指定の仕方を見ていきます。 translation:移動 scale:拡大・縮小 rotate:回転 skew:剪断(せんだん) 変換の順序 まとめ translati…

当ブログで紹介したTweakpaneの記事を一覧にまとめました。 Tweakpaneの記事まとめ Tweakpaneとは Tweakpaneの記事まとめ 【Tweakpane】Tweakpaneの導入 【Tweakpane】パラメータの調整 【Tweakpane】値の範囲の制限:min,max,step,options 【Tweakpane】色の…

SVGは、テキストを描画することもできます。図形とは違うテキスト特有の属性があり、それを使って装飾します。また、パスに沿ってテキストを配置することもできます。 text:テキストの記述と属性 テキストの装飾 tspan:テキストの一部分に対するスタイルの適…

SVGは、図形だけではなくパスも描画できます。パスを使ってより複雑な形状を描画することができます。パスは、コマンドを記述してパスデータを手動で作成します。しかし、イラレなどのソフトを使ってパスデータを作成する方が現実的です。 path:パスを描画す…

基本形状の描画について書きます。「長方形」「円」「楕円」「直線」「折れ線」「多角形」の基本的な書き方を見ていきます。基本形状を組み合わせることで、様々な図形を作成することができます。 基本形状の種類 rect:長方形の記述と属性 circle:円の記述と…

SVGの基礎として「ひな型ファイル」「座標系」「色の指定」「グループ」「リンク」についてご紹介します。まずは、ひな型となるファイルを作成します。次に、座標系や色の指定などの基本を理解します。そして、グループとリンクについて知っていきます。 SVG…

画像形式のひとつである「SVG」について書きます。SVGは、Webで使える画像形式です。使いどころは限られてしまうかもしれませんが、技術のひとつとして触れていきたいと思います。アニメーションを指定できるので、どのような表現ができるのか探っていきたい…

p5.jsの全体像について書きました。合わせて当ブログで紹介した入門記事をまとめました。今後の展望として、p5.jsを勉強した後に何を勉強したら良いのかを挙げてみました。参考程度にどうぞ。 p5.jsの全体像 p5.jsの入門記事のまとめ 基本 応用 今後の展望 p…