How to add color noise to an svg image or can it be made simpler?

Question

css

Hello. Such situation. There is an svg picture of "waves" of purple color. You need to add noise to this "wave". Tell me how to do it?
Now a little more. There is such a "graph" that consists of "waves" (there are actually 6 jokes, but to make it clearer, I left only 2). I need to make up this whole canoe. I'm trying to make the first wave (which is closer to us), but it has a peculiarity. It should have color noise. If I just save the pictures in png and insert them through the tag, then the size of the page will be wild. In order to reduce the size, I saved the first wave in svg. As you probably know, the color of svg is set via fill. base64, alas, I can’t tie it there ... Tell me, how can I add noise to svg? Or, tell me, how else can I make it all up?

Answer 1

you translate these pictures into a separate canvas and there you make the
layers of canvases noisy, then you make up

Answer 2

In theory, you should do this, save all these waves as svg with transparency and shove them onto the page, and this noise should be done as a pattern or picture. And then you push this pattern in layers below the svg and make the svg borders cut off the pattern or image. And since the svg is transparent, the bottom layer with the noise pattern will be visible.