菱青海波
Information
項目をクリックするとここにヘルプが表示されます。
表示形式
「最小パーツ」を選ぶと描画内容をリピートせずに表示させ、「このボックス」を選ぶとリピートさせて表示させます。
縦横比の維持
「する」にチェックを入れた時点の縦横比を維持しながらサイズを変更できる機能です。
横と縦
横のサイズと縦のサイズを変更できる機能です。
単位はpxで、1pxから1000pxまで指定できます。
svgコード的にはwidthとheightの値を変更しています。
回転
描画内容を90°ずつ回転できる機能です。
svgコード的には描画内容をグループ化してtransformで変形しています。
鏡像
描画内容を横か縦に反転できます。
svgコード的には描画内容をグループ化してtransformで変形しています。
面と線と背景色
「なし」にチェックを入れると表示しません。
また、描画がない部分は透過です。上画面では白になります。
色関連
色は変更できます。
#から始まるカラーコードで指定してください。桁の省略は非推奨(※カラースライダーとの連動がおかしくなります)。
右カラムの「カラーコード作成」の「リンク」から対応する箇所を選ぶと楽かもしれません。
色の操作から大まかな色味は操作できると思います。
透過関連
不透明度を変更できます。
面と線、全体でそれぞれ指定できます。
面の反転
「する」にチェックを入れると面の描画領域が反転します。
svgコード的には時計回りのパスを反時計回りのパスで囲んで反転させてます。
線の幅
線の幅を変更できます。
「線」のところで「なし」にチェックがついてると見た目は変わりませんが、動作はしてます。
線の位置
線の位置を、面の位置より手前か奥かで指定できます。cssのz-indexみたいな感じです。
「線」のところで「なし」にチェックがついてると見た目は変わりませんが、動作はしてます。
リンク
選択されたものとカラースライダーが対応します。
赤の操作、緑の操作、青の操作
RGBカラーの数値を変更する機能です。
現状スマホ、タブレットでは細かい値の調整が難しいです。済みません。
コメント
菱青海波です。
古来から文様として愛されてる菱と、吉祥文様の青海波を合わせたものです。刺し子の図案としてよく使われているみたいです。
svgコードの話になるのですが青海波と比較すると、ずいぶん簡単に書くことができました。いちいち円の交点の計算とかをせず、ポンポン決めた座標をビシビシ直線でつないだだけなので当然といえば当然ですが。まあ青海波も菱青海波もsvgの得意分野であるスケーラブルな曲線と斜線を十分に生かせているのではないかと思います。