背景图案生成
Background Pattern Generator
生成可无缝平铺的 SVG 图案——条纹、圆点、网格、噪点——颜色和疏密都能调。
绘制一个无缝的背景图案——圆点、网格、条纹、方格、十字、三角或波浪——并以 CSS 数据 URI、SVG 文件，或者一个可以粘进现有文档的 `<pattern>` 片段交回。旋转作为 `patternTransform` 应用，所以拼贴保持无缝，而不是在自己的边缘断开。
图案
最安静的图案。圆点超过图块的五分之一，看起来就成了纹理，不再是图案。
输出
URL 编码的 URI 是 450字节，Base64 是 526字节。
用的是 URL 编码而不是 Base64——这里小了 14%，而且在样式表里还读得懂。任何 SVG 都可以交给 SVG 数据 URI 编码器做同样的事。
怎么用
选形状
每一种都说明它是干什么用的。圆点最安静；网格在图表后面清晰，在文字后面分心；斜条纹是人人认得的“施工中”填充。
设定拼贴大小和粗细
粗细是拼贴的一个比例而不是像素值，所以你调整拼贴大小时图案保持它的性格。超过大约五分之一，形状就不再读作图案，而开始读作纹理。
把对比度压低
这是决定一个背景成败的决定。看得见的图案通常已经太强了：前景色选一个离背景一两级的，而不是对比色，上线之前放在真实文字后面检查。
取 CSS、文件，或片段
CSS 是一个 URL 编码的数据 URI，可以直接用于 `background-image`。SVG 文件给任何 URI 不管用的地方。`<pattern>` 片段放进现有的 `<svg>` 里，用 `fill="url(#p)"` 引用。
常见问题
它会无缝拼贴吗？
会，这是几何在为之做功的部分。斜条纹画成三个环绕的副本，所以斜线跨过拼贴边缘继续；波浪是两段在接合处斜率匹配的三次曲线。旋转走 `patternTransform` 也是同样的原因——在拼贴内部旋转几何会在边界留下切断的端头。
能导出 PNG 吗？
这里不能。输出是三种包装的 SVG，与分辨率无关，大小只是零头——一个圆点图案作为数据 URI 是几百字节，作为 PNG 拼贴会是几 KB。需要位图时，下载 SVG 再栅格化。
背景图案会影响性能吗？
很少，但有一种真实的情况：很小的拼贴铺在很大的面积上，会让合成器重复它非常多次，在低端手机上这会在滚动时显出来。如果一个带图案的页面感觉沉重，试试更大的拼贴配同样的视觉密度。
能把图案当作图片上的纹理吗？
能——打开透明背景，拼贴就只带前景形状，后面的任何东西都透过来。把它作为第二个 `background-image` 层叠在照片上面。
可以从这些接进来
CSS 渐变生成
CSS Gradient Builder
拖动色标做出线性、径向和锥形渐变，并按 sRGB 或 OKLCH 输出 CSS。
社交分享卡片生成
Social Card Generator
把标题、副标题、品牌文字和可选的 logo 摆进模板，生成 1200×630 的分享图，并写好配套的 meta 标签。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
CSS 渐变生成
CSS Gradient Builder
拖动色标做出线性、径向和锥形渐变，并按 sRGB 或 OKLCH 输出 CSS。
社交分享卡片生成
Social Card Generator
把标题、副标题、品牌文字和可选的 logo 摆进模板，生成 1200×630 的分享图，并写好配套的 meta 标签。
SVG 转 CSS 数据 URI
SVG to CSS Data URI
把 SVG 编码成可用作 CSS 背景的 data URI，只转义非转义不可的字符，把体积压到最小。
SVG 优化压缩
SVG Optimiser
清掉编辑器留下的冗余、合并变换、缩减路径精度，并把渲染结果并排对比。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。