SVG 噪声与纹理生成器

SVG 噪声与纹理生成器

使用 SVG 过滤器在浏览器中直接创建有机颗粒噪声和湍流云纹理 feTurbulence 调整滑块，更改种子，选择色调颜色，即可实时查看纹理变化。可导出为内联 SVG、CSS 数据 URI 或可应用于任何形状的可重用 SVG 过滤器。 background-image 选择噪声类型 —

如何使用

1. 分形噪声 用于有机胶片颗粒， 湍流 用于云状漩涡。 基础频率
2. 调整 决定颗粒大小和 层次 决定细节丰富程度。 种子
3. 更改 用于浏览不同的随机图案。 拼接图块
4. 切换 用于无缝可重复的输出。 着色
5. 选择 单色 或 模式，并调整背景、色调、透明度和对比度。 复制 SVG、CSS 数据 URI 或过滤器代码片段，或下载 SVG 文件。
6. 两种噪声类型

特征

• — 分形噪声（有机颗粒）和湍流（烟雾漩涡）。 — 每次滑块变化时自动防抖重渲染。
• 实时预览 层次控制
• — 1–8 层次，以在丰富性与性能之间取得平衡。 种子可重现性
• — 每个种子都对应一个独特的确定性图案。 无缝拼接
• — 可选 用于可重复的背景。 stitchTiles="stitch" 单色或着色
• — 灰度颗粒或通过 对比度与透明度 feColorMatrix.
• — 通过 增强强度 feComponentTransfer.
• 三种输出格式 — 内联 SVG、CSS 数据 URI 背景或仅过滤器 SVG。
• 一键下载 — 保存为独立的 .svg.

何时使用噪声纹理

• 颗粒渐变 — 将噪声叠加在 CSS 渐变上以消除条带现象。
• 纸张和胶片效果 — 为扁平插画和英雄区域添加细微颗粒。
• 云和烟背景 — 使用低频率和少量层次的湍流。
• 破损和纹理叠加 — 将过滤器应用于形状，以获得手绘效果。