クアトレフォイル(quatrefoil)

表示形式

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

縦横比の維持

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

横と縦

横のサイズと縦のサイズを変更できる機能です。
単位はpxで、1pxから1000pxまで指定できます。
svgコード的にはwidthとheightの値を変更しています。

回転

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

鏡像

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

面と線と背景色

「なし」にチェックを入れると表示しません。
また、描画がない部分は透過です。上画面では白になります。

色関連

色は変更できます。 #から始まるカラーコードで指定してください。桁の省略は非推奨(※カラースライダーとの連動がおかしくなります)。

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

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

透過関連

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

面の反転

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

線の幅

線の幅を変更できます。
「線」のところで「なし」にチェックがついてると見た目は変わりませんが、動作はしてます。

線の位置

線の位置を、面の位置より手前か奥かで指定できます。cssのz-indexみたいな感じです。
「線」のところで「なし」にチェックがついてると見た目は変わりませんが、動作はしてます。

リンク

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

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

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