波
Information
項目をクリックするとここにヘルプが表示されます。
表示形式
「最小パーツ」を選ぶと描画内容をリピートせずに表示させ、「このボックス」を選ぶとリピートさせて表示させます。
縦横比の維持
「する」にチェックを入れた時点の縦横比を維持しながらサイズを変更できる機能です。
横と縦
横のサイズと縦のサイズを変更できる機能です。
単位はpxで、1pxから1000pxまで指定できます。
svgコード的にはwidthとheightの値を変更しています。
回転
描画内容を90°ずつ回転できる機能です。
svgコード的には描画内容をグループ化してtransformで変形しています。
鏡像
描画内容を横か縦に反転できます。
svgコード的には描画内容をグループ化してtransformで変形しています。
面と線と背景色
「なし」にチェックを入れると表示しません。
また、描画がない部分は透過です。上画面では白になります。
色関連
色は変更できます。
#から始まるカラーコードで指定してください。桁の省略は非推奨(※カラースライダーとの連動がおかしくなります)。
右カラムの「カラーコード作成」の「リンク」から対応する箇所を選ぶと楽かもしれません。
色の操作から大まかな色味は操作できると思います。
透過関連
不透明度を変更できます。
面と線、全体でそれぞれ指定できます。
面の反転
「する」にチェックを入れると面の描画領域が反転します。
svgコード的には時計回りのパスを反時計回りのパスで囲んで反転させてます。
線の幅
線の幅を変更できます。
「線」のところで「なし」にチェックがついてると見た目は変わりませんが、動作はしてます。
線の位置
線の位置を、面の位置より手前か奥かで指定できます。cssのz-indexみたいな感じです。
「線」のところで「なし」にチェックがついてると見た目は変わりませんが、動作はしてます。
リンク
選択されたものとカラースライダーが対応します。
赤の操作、緑の操作、青の操作
RGBカラーの数値を変更する機能です。
現状スマホ、タブレットでは細かい値の調整が難しいです。済みません。
コメント
波です。波縞といったほうがいいのかも知れません。
svgの話になりますが、この模様だと線幅(stroke-width)を太くした時の線の形状がなんかアレなんですよ。面(fill)を描くパスと線(stroke)を描くパスは別で用意していますが、この模様だと同じ位置に同じ二次ベジェ曲線で書いています。線幅を太くした時の曲線の形状は面の曲線の形状と一致しません。
strokeは難しいです。実はサイト作成を始める前はstrokeの操作を出来るようにしようとは考えていませんでした。ただそんな折、地元の美術館でやっていたアルフォンス・ミュシャ展を見にいって輪郭線の魅力にノックアウトされてしまいました。それでstrokeも操作出来るように作りました。