水玉模様

表示形式

「最小パーツ」を選ぶと描画内容をリピートせずに表示させ、「このボックス」を選ぶとリピートさせて表示させます。

縦横比の維持

「する」にチェックを入れた時点の縦横比を維持しながらサイズを変更できる機能です。

横と縦

横のサイズと縦のサイズを変更できる機能です。
単位はpxで、1pxから1000pxまで指定できます。
このページでは縦と横が常に連動します。

回転

描画内容を90°ずつ回転できる機能です。
svgコード的には描画内容をグループ化してtransformで変形しています。

鏡像

描画内容を横か縦に反転できます。
svgコード的には描画内容をグループ化してtransformで変形しています。

面と線と背景色

「なし」にチェックを入れると表示しません。
「面」と書いてますが「塗り」のほうがピンとくる人もいると思います。
また、描画がない部分は透過です。上画面では白になります。

色関連

色は変更できます。 #から始まるカラーコードで指定してください。桁の省略は非推奨。

右カラムの「カラーコード作成」の「リンク」から対応する箇所を選ぶと楽かもしれません。

色の操作から大まかな色味は操作できると思います。

透過関連

不透明度を変更できます。 面と線、全体でそれぞれ指定できます。

面の反転

「する」にチェックを入れると面の描画領域が反転します。
svgコード的には時計回りのパスを反時計回りのパスで囲んで反転させてます。

線の幅

線の幅を変更できます。

線の位置

線の位置を、面の位置より手前か奥かで指定できます。cssのz-indexみたいな感じです。
svgコードの説明をすると、面と線は別個のpathタグで作られており記述位置を変えることで操作しています。

疎密xと疎密y

描画内容同士の距離を変更できます。
縦と横と連動しており、こちらを操作すると縦と横の値も変化します。

ルール

描画内容が重なった場合に重なった部分を反転するか、しないか選択できます。
チェックを入れた状態で疎密の値を小さくすると確認できるかと思います。
svgコード的にはfill-ruleをevenoddにしています。

並び

通しは描画される最小パーツの中心に一つ描画内容が存在します。
行儀は描画される最小パーツの中心と四隅に描画内容が存在します。

リンク

選択されたものとカラースライダーが対応します。

赤の操作、緑の操作、青の操作

RGBカラーの数値を変更する機能です。
現状スマホ、タブレットでは細かい値の調整が難しいです。済みません。