はじめに 皆さん、こんにちは。 唐突ですが、SVGをご存知でしょうか？ SVGは「Scalable Vector Graphics」 の略で画像フォーマットの１つです。 皆さんが普段見慣れている画像フォーマットは、JPGやPNGが多いのではないでしょうか。JPGやPNGは、スマホの写真やWEBサイトなどでよく使われている画像フォーマットですので、普段何気なく見ている画像はこの形式が多いと思います。 SVGは、その名の通り、ベクター形式で画像を表現します。点とそれをつなぐ線、
はじめに 皆さん、こんにちは。 今回は、私のプロフィールアイコン「warashi」が手に持っている手鞠（てまり）のつくり方をご紹介します。 「warashi」は、座敷童子をモチーフにしたSVGコレクションとしてNFT化しています。 コレクションへのリンクはプロフィール欄に記載していますが、下の画像をクリックいただいてもご覧いただけます。 私のnoteの記事で紹介しているアニメーションを使用した作品もありますので、是非、私のコレクションを応援してくださいね。 ここから本
はじめに 皆さん、こんにちは。 今回は、ゆっくりと開閉を繰り返す扇子をつくってみようと思います。 皆さんも、扇子の開閉をどう再現させたらよいか少し考えてみてください。 本題に入る前に扇子の名称について確認しておきます。 名称は、記事中で使うのでしっかりと確認しておいてくださいね。 扇子の構造を観察する 扇子は、どような構造になっているのでしょうか。 よく見ると、扇面と中骨が、以下の図形で構成されているのがわかると思います。 上の図では、この図形が５つ使われています
無限横スクロールに挑戦 皆さん、こんにちは。 今回は、画像が延々と横にスクロールするアニメーションに挑戦してみたいと思います。 まずは、以下をご覧ください。 以前に作った「市松模様」の画像を横にスクロールするアニメーションにしてみました。「Run Pen」のクリックで横スクロールするアニメーションをご確認いただけるかと思います。 これを実現する方法をご説明したいと思います。 市松模様のつくり方については、以下の記事をご覧ください 仕組みの考察 画像が横にスクロールす
はじめに SVG animation 記事の2回目になります。 今回は、風車がゆるやかに回転するアニメーションを作ります。 SVG animation 記事の1回目では、三角形の中心を軸に回転するアニメーションをご紹介しました。 風車を使った作品は、NFTコレクションにしていますので、ぜひ、ご覧ください。リンクは私のクリエイターページに記載しています。 風車をつくる 以下の画像をご覧ください。 二等辺三角形を組み合わせて風車を作ってみました。 回転軸を明確にするた
皆さん、こんにちは。 前回、「麻の葉模様をつくる」で麻の葉模様の作り方をご紹介しました。 今回は、「市松模様」の作り方をご紹介します。 「市松模様」は、アニメ「鬼滅の刃」の主人公、竈門炭治郎が着ている羽織のデザインにも採用されている模様なので、ご存知の方も多いかと思います。ちなみに、前回、ご紹介した「麻の葉模様」は、同じく「鬼滅の刃」で竈門禰󠄀豆子が来ている着物のデザインに採用されています。 「市松模様」は、「麻の葉模様」よりも若干少ない手順で作成できるので、初心者の方
麻の葉模様の作り方 皆さん、こんにちは。 今回は、「SVG画像をつくる」の「少し複雑な例」で紹介した麻の葉模様を作ってみます。 SVG画像は、簡単なものであれば、専用のソフトを使わなくても描くことができるのですが、麻の葉模様はさすがに描画アプリの力が必要です。 仮に専用アプリ無しでできたとしてもかなりの労力になると思います。 ということで、今回は、AdobeのIllustrator（iPad版）を使って、麻の葉模様を描いて、SVG画像にする手順をご紹介します。 基本
簡単なSVGアニメーション 皆さん、こんにちは。 前回は、「SVG画像をつくる」と題して、簡単な図形の描画と麻の葉模様のSVG画像を紹介しました。 今回は、三角形が回転するアニメーションに挑戦してみます。 図形が回転するアニメーションの実現方法はいくつかありますが、CSSやスクリプトを使わずに、SVGコードのみで書いてみます。専用のアプリは必要ありませんので、ぜひ挑戦してみてください。 三角形を描く まずは、対象となる三角形を描きます。 以下、「Run Pen」で描
