Генератор шума и текстур на основе SVG

Генератор шума и текстур на основе SVG

Создайте органическую шумную текстуру и турбулентные облака напрямую в браузере с помощью SVG feTurbulence фильтра. Перемещайте слайдеры, изменяйте seed, выбирайте цвет настройки, и наблюдаете за обновлением текстуры в реальном времени. Экспортируйте как встроенный SVG, CSS background-image URI данных или как повторяемый фильтр SVG, который можно применять к любым формам.

Как использовать

1. Выберите тип шума — Фрактальный шум для органической пленочной текстуры, Турбулентность для облакистых вихрей.
2. Настройте Основная частота для размера зерна и Октавы для насыщенности деталей.
3. Изменить Seed для переключения между различными случайными паттернами.
4. Переключать Сшить плитки для бесшовного повторяемого вывода.
5. Выбрать Монохромный или Цветной режим и настройте фон, оттенок, прозрачность и контраст.
6. Скопируйте SVG, CSS URI данных или фрагмент фильтра, или загрузите SVG-файл.

Возможности

• Два типа шума — Фрактальный шум (органическая текстура) и Турбулентность (облакистые вихри).
• Живой предварительный просмотр — Отложенный перерисовка при каждом изменении слайдера.
• Контроль октав — 1–8 октав для баланса между насыщенностью и производительностью.
• Определённость на основе seed — Каждый seed — уникальный детерминированный паттерн.
• Бесшовное повторение — Опционально stitchTiles="stitch" для повторяемых фонов.
• Монокромный или цветной — Зернистый оттенок в серых тонах или любой оттенок через feColorMatrix.
• Контраст и прозрачность — Увеличить интенсивность с feComponentTransfer.
• Три формата вывода — Встроенный SVG, CSS URI данных фона или фильтр только SVG.
• Одноклик-скачивание — Сохранить как автономный .svg.

Когда использовать текстуры шума

• Зернистые градиенты — Накладывайте шум на CSS-градиент, чтобы сгладить полосы.
• Эффекты бумаги и пленки — Добавьте незначительную зернистость к плоским иллюстрациям и секциям с героем.
• Фон из облаков и дыма — Используйте турбулентность с низкой частотой и несколькими октавами.
• Эффекты повреждения и текстуры — Примените фильтр к формам для получения эффекта ручного напечатания.