Как на svg картинку добавить цветовой шум или можно сделать всё проще?

Question

[del993788]

Здравствуйте. Такая ситуация. Есть svg картинка "волны" фиолетового цвета. Нужно добавить на эту "волну" шум. Подскажите, как это сделать?
Теперь чуть по подробнее. Есть такой "график", который состоит из "волн" (их на самом деле 6 шутк, но чтобы было понятнее, я оставил только 2). Мне нужно сверстать всю эту байду. Я пытаюсь сделать первую волну (которая ближе к нам), но у неё есть особенность. У неё должен быть цветовой шум. Если я просто буду сохранять картинки в png и вставлять через тег , то размер у странички будет дикий. Дабы уменьшить размер, я сохранил первую волну в svg. Как вы наверно знаете - цвет у svg задаётся через fill. base64 я прикрутить туда, увы, не могу... Подскажите, как можно добавить на svg шум? Или, подскажите, как по другому можно это всё сверстать?

Comments

[Нерон Лордов]

А заполнить повторяющимся паттерном свг можно? Я не знаток верстки, просто может подкину идею. Либо наложить поверх другой свг, состоящий из пиксельных квадратов разного цвета.

Answer 1

[тостер хабрович]

переводишь данные картинки в отдельный холст и там зашумляешь
слои холстов потом верстаешь

Comments

[del993788]

холст? в смысле в фотошопе? Если да, то не нет. Это не вариант. Дело в том, что шум тоже будет масштабироваться. И в конечном итоге на том же retina картинка будет страшной. Я есть еще подозрение, что размер svg увеличиться раз в 100.

[тостер хабрович]

qqignatqq: нет
я про canvas и шум на жаваскрипте

[del993788]

Википедия сказала, что canvas требователен к железу, а я как раз тот счастливый обладатель старого двухядерного компа с fullhd экраном.

[тостер хабрович]

qqignatqq: канвас может быть быстрым
в твоем случае самое то
еще и с режимами наложения канваса на канвас можно поиграться

Answer 2

[Павел Анплеенко]

По идее ты должен сделать так, все эти волны сохраняешь как svg с прозрачностью и пихаешь их на страницу, а этот шум надо делать как паттерн или картинка. И потом этот паттерн запихиваешь по слоям ниже чем svg и делаешь, чтобы границы svg обрезали паттерн или картинку. И так как svg с прозрачностью будет виден нижний слой с шумовым паттерном.