クロクロ・ツールズ
サイトTOP

ブロック・グラデーション作成

ブロックで段階的に区切られたグラデーション画像を作成します。出力はSVG、PNG、JPGを選べます。絵やタイトルの背景に利用するとよいです。
JavaScript製で、HTML5に対応しているブラウザから使えます。
ツイート@rutenさんをフォロー pixiv fanbox 支援

アプリ本体

SVG作成

色1(左下):
色2(右上):
ブロック横サイズ:
px
ブロック縦サイズ:
px
横ブロック数:
縦ブロック数:
横ランダム:
px
縦ランダム:
px
ランダム シード:
ランダム シードの形式
色空間
色相内回り
hsl, hcl, cubehelix で有効
偽色相の使用
色相を緑の幅を狭めに歪ませる
ブロック間の隙間を消す方式
形を膨張:隙間を埋めるように形を膨張させる。InkscapeでcrispEdgesが効かない時に有効。 鮮明な端:「shape-rendering="crispEdges"」を追加する。アンチエイリアスを使わないできっちり形を詰める。長方形や正方形の端がきれいになる。Webブラウザで有効。
右クリックから画像を保存して下さい。

画像作成

SVGを作成したあとに実行して下さい。
横幅
高さ
横の形式
縦の形式
画像形式
右クリックから画像を保存して下さい。

使い方

ブロックで段階的に区切られたグラデーションを作成します。SVGやPNG、JPGを作成します。

「SVG作成」では、1ブロックのサイズを指定したあと、横に並べるブロック数、縦に並べるブロック数を指定します。

ランダムを利用すると、横や縦にランダムで頂点を移動させることができます。固定シードを選ぶと、ランダムの結果を同じにできます。

色空間は、基本はHSLで、その他は用途に応じて利用します。色相内回りは、色相環の内回り外回りです。偽色相を使用すると、人の見た目に近い色分割に近づけます。

「画像作成」では、SVGを元にPNGやJPGを作成します。

「JSONデータ読み込み」を利用すると、保存しておいたJSONデータを入力欄に反映できます。

作成した画像は、ご自由にお使いください(許諾などは必要ございません)。

2023-01-23:「ブロック間の隙間を消す方式」を選択可能に改良。

類似ツール 文字はんこ画像 SNS用文字列画像
UPDATE
黒板文字 方眼紙 ヘクスシート アスキーアートの図をSVGに ブロック・グラデーション ドット絵をSVGに セル塗り画像から線画 ダミー画像

ツール一覧 (アプリ数 51本) 説明付きリスト

QRコード QRコード生成
UPDATE
QRコード解析
便利 Google検索URL短縮 ブックマークレット作成 パスワード生成
小説・文書 文字数計測 単語カウント 指定文字数改行 ルビ追加 単語近傍探索 こそあど確認 文末重複確認 画数ヒートマップ 文章警告 文長ヒートマップ 文字種表示 漢字含有語検索 文章差分表示(文字単位)
画像生成 文字はんこ画像 SNS用文字列画像
UPDATE
黒板文字 方眼紙 ヘクスシート アスキーアートの図をSVGに ブロック・グラデーション ドット絵をSVGに セル塗り画像から線画
Web開発 HTML特殊文字 HTMLタグ除去 Data URIスキーム URLエンコード/デコード ダミー画像 ブラウザ情報
ゲーム タワーディフェンス
NEW
EX リバーシ
時間 ストップウォッチ アラーム&タイマー 時計 今日は何の日
電卓・換算 電卓 履歴電卓 年月日電卓 時間電卓 進数 面積 体積
その他 領収書 計算プリント Androidアイコン画像 Android PR用画像 KC2 目次

QR コード

情報

全てのWebアプリは、Chrome準拠で作成しています。

バグのご連絡や、ご要望などは、メール宛によろしくお願いします。


著作権者 : 柳井 政和

Web Site : http://crocro.com/

This Page : https://crocro.com/tools/item/gen_block_gradation/

Twitter : ruten