9 ms·

Making noisy SVGs

499 points by dimmke 3y ago

esafak 3y ago
This reminds me of how film photographers and film-makers strived to eliminate grain while digital photographers felt the need to add it back in. The grass is greener on the other side! I confess to finding the examples on this page quite appealing, amidst all the digital sterility.
- TheRealPomax 3y ago
  It'd be good not to overgeneralize. For as long as we've been doing digital video, and then later, digital photography, there have been as many folks trying to minimize noise as trying to eliminate noise as trying to simulate noise as intentionally exploiting noise. Noise as a thing was never the problem, it was always about whether there was too much of it.
  - Puts 3y ago
    Exactly. Noise adds texture - which is an important ingredient in visual art and design. But too much noise obstructs the image. It's all about balance – just like cooking.
- treprinum 3y ago
  Wasn't that kinda solved by Foveon X3? Film-like yet digital.
  - esafak 3y ago
    I think the problem resolved itself when a new generation grew up with digital photography and did not long for grain. Now it is a retro aesthetic, like gen-Z's use of pixel art.
  - dharma1 3y ago
    Foveon just has 3 vertically stacked layers of photodiodes (one for each RGB colour) instead of a single one with Bayer filters like other digital camera sensors. It’s not related to film grain (which is a byproduct of silver particles in celluloid).
    - treprinum 3y ago
      The behavior of the sensor with its flaws closely resembled film. The sharpest digital pictures I've ever observed.
      - dharma1 3y ago
        they are very sharp indeed, and the colours are quite film like. I have a DPM2 and waiting for the Foveon full-frame sensor that Sigma is still working on.
jessehattabaugh 3y ago
The examples are practically invisible in dark mode. The author should use rasterized screenshots with white backgrounds, or a media query with a brighter color.
- half-kh-hacker 3y ago
  Which dark mode are you talking about? As far as I can tell the page (& demos) don't ship any styles for prefers-color-scheme: dark at all
  - rtkwe 3y ago
    Reminds me of the meme of the person shoving a stick into their bikes wheel then complaining about ______. Used to get it a lot here with people complaining about sites being broken because they were hard blocking essentially all javascript, the issues are your own making here...
  - shrx 3y ago
    In my case firefox used the OS's (Windows 10) dark mode preference. In about:config the layout.css.prefers-color-scheme.content-override setting was on 2 (system). Setting it to 3 (browser) turned the dark mode off.
- nix0n 3y ago
  The Firefox "Dark Background and Light Text" extension works fine on this page when using the "Invert" option.
- ssgodderidge 3y ago
  Sounds like a great idea if you would like to use these in your own dark mode site. The demo site is not in dark mode, however, so why should they optimize for this?
Minor49er 3y ago
> I’m not hip enough to know if this style has been assigned a pithy label, but I do enjoy it. At the same time, I find it frustrating — because as far as I can tell (the lack of examples I have seen in the wild supports this theory) there isn’t an easy way to replicate these illustrations with SVGs The term the author is looking for is "dithering". CSS-Tricks explains this on their page "Grainy Gradients" using the same technique: https://css-tricks.com/grainy-gradients/ https://css-tricks.com/grainy-gradients/ There's also a decent alternative to doing this with CSS, though it's applied to the entire image: https://github.com/tomren1/dither-with-css https://github.com/tomren1/dither-with-css
- JKCalhoun 3y ago
  Is that really dithering when you're not using a limited palette to simulate a larger one? Reminds me of vintage travel poster art. Example: https://www.graphicart-news.com/wp-content/uploads/2012/09/28_AF_afrique.jpg https://www.graphicart-news.com/wp-content/uploads/2012/09/2...
  - betenoire 3y ago
    It's a dithering effect for sure. Drop shadows aren't actually shadows, either :)
    - kookamamie 3y ago
      "Dithering" is adding noise to randomize quantization errors and to hide banding. The OPs post looks like just adding noise for getting a noisy look.
      - itishappy 3y ago
        It's the same effect! OP may have done this for style, but the effect also happens to hide any banding that may have be present.
        Someone 3y ago
dexwiz 3y ago
Reminder that art is cyclic. This reminds me of the Memphis airbrushed geometric art from the 80s. The latest flat design cycle is dead, and one way to evolve is take the latest generation (flat) and combine it with current retro trend (80s/90s redistilled by GenZ). So you take the natural noise generated by airbrushed artwork of the 80s/90s and translate that into digital art via gradients. Voilà! You have a style that will dominate the digital art landscape for the next few years.
- esafak 3y ago
  Are there any resources to stay abreast of design trends? I know about https://aesthetics.fandom.com/ https://aesthetics.fandom.com/
  - shermantanktop 3y ago
    Just visited. Not sure how to label the (dubious) design sensibility of the site itself, but the massive ugly ads are making me realize my adblocker is off. Interesting content nonetheless.
  - werber 3y ago
    codrops is a nice one
    - deleted 3y ago
      [deleted]
  - mp_mn 3y ago
    I like CARI a lot https://cari.institute/aesthetics https://cari.institute/aesthetics
    - dimmke 3y ago
      This is remarkable. Thank you!
    - aidenn0 3y ago
Retr0id 3y ago
The "ApeFest" website[1] (yeah, the one that burnt attendees' retinas with UV) has some dynamic noise going on, and I had a look at the CSS. They're actually using a tiled PNG overlay[2], which gets wobbled around "randomly" using CSS animations (edit: actually, looks like they move it with JS). Pretty low-tech, but it works. [1] https://apefest.com/ https://apefest.com/ [2] https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpv...
- cosmotic 3y ago
  The apefest effect uses a lot of CPU and thus energy.
  - Retr0id 3y ago
    It does if you redraw every frame, but if you disabled the animation and made it static I have a feeling it could beat the SVG method (although it probably wouldn't look as good). It also has the advantage of looking mostly the same in every browser - the comments here report inconsistencies with the SVG method.
    - spartanatreyu 3y ago
      I experimented with an effect where a single frame of noise was generated, then reused throughout an animation: https://codepen.io/spartanatreyu/pen/qBKBgPN?editors=1100 https://codepen.io/spartanatreyu/pen/qBKBgPN?editors=1100 I was initially trying to replicate a visual effect from a music video but it morphed into this. I kind of like the effect
rpigab 3y ago
I was wondering if it would be wise and feasible to add WebGL shaders over SVGs?
globular-toast 3y ago
This looks really strange in Firefox. Especially in the full example[0]. The "noise" has regularity as if it has been tiled and almost looks like it has been run through a lossy compressor. [0] https://danielimmke.github.io/noisy-shapes/ https://danielimmke.github.io/noisy-shapes/
- Tistron 3y ago
  They look almost identical to me in Fx and Chrome. Safari on the other hand...
Tistron 3y ago
I recently was playing with SVG, to get a dropshadow I couldn't make when drawing on canvas. I could not get css dropshadows in SVG working in Safari and had to use SVG native drop shadow filters, and then that looks different in Safari than in the other browsers. The specific thing is at https://www.einarmagnus.net/pages/logo https://www.einarmagnus.net/pages/logo I do my best to detect safari with javascript and activate the SVG version and disable the css version. Background on the "recursive yin yang" is here: https://einarmagnus.net/blog/2020/01/22/finding-the-logo https://einarmagnus.net/blog/2020/01/22/finding-the-logo Maybe I'll play with texture, I like that aesthetic a lot. But it is frustrating that it looks so differently in Safari. Do you think that they will converge on how they interpret SVG?
- epiccoleman 3y ago
  That recursive yin yang article is great, and the logo you got out of the experiment is incredibly cool. I'm impressed!
  - Tistron 3y ago
    Thank you!
- airstrike 3y ago
  Your link is so cool it's worth a submission of its own. Thanks for sharing!
  - Tistron 3y ago
    Thank you! I didn't get around to making UI for it, but I also added the ability to link to animations: https://einarmagnus.net/pages/logo?animate=wait:3000;angle:0;wait:2000;color:gray;wait:3000;angle:-20;wait:2000;color:fire;wait:3000;angle:0;wait:2000;color:gray;wait:3000;angle:45;wait:2000;color:sea https://einarmagnus.net/pages/logo?animate=wait:3000;angle:0... I lose myself in doing these little things instead of marketing or copy, haha.
    - 3y ago
ortichic 3y ago
I like the effect, but is there a way to make it independent of the zoom level? On a related note, this probably adds randomness, is there a way to seed it? For example to be able to define a single correct render result at a given size.
- dimmke 3y ago
  Author here, yes there is! The underlying algorithm and implementation in SVG accepts a seed value: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/seed https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/s...
  - smusamashah 3y ago
    I am on phone and can not see the noise in the final image at all. I think its there but when I zoom in, it feels like it disappears. You should probably consider making it bigger or independent of zoom for the sake of mobile viewers.
- WatchDog 3y ago
  As the other comment mentions, yes there is a seed attribute, also the algorithm for the randomness function is defined in the specification as 186 lines of C code[0], so in theory different implementations should behave the same. Although looking at the cod, it uses floating point math, which I believe is implementation defined, so maybe it could behave differently on various platforms. [0]: https://drafts.fxtf.org/filter-effects/#elementdef-feturbulence https://drafts.fxtf.org/filter-effects/#elementdef-feturbule...
pdn1 3y ago
Gradient.
gatkinso 3y ago
Really excellent work
Tao3300 3y ago
That's cool. Looks like Inkscape supports adding this kind of noise through its various effects in its Filters menu. Exported as a Plain SVG and looking at the code confirms the use of feTurbulence. For comparison, I also did a test to see how Affinity Designer 2 does it, since it has noisy fills. The SVG it exports has the noise embedded in it as a base64 jpeg image!
- OliveMate 3y ago
  I'm currently away from my PC so I can't check myself, does it embed a single noise texture and use it multiple times, or does it generate a texture for each use of noise? As someone who can't justify an Adobe license and can't wrap their head around InkScape, Designer has been a perfect alternative bar quirks like this.
  - Tao3300 3y ago
    It might have been a deliberate choice. That way you don't have to count on filter support whenever and wherever it's being rendered.
- herpdyderp 3y ago
  Affinity Designer 2 has been really nice vs paying for Adobe Creative Cloud but it sure has required me to manually tweak SVGs a lot!
IshKebab 3y ago
I'm not sure what it's supposed to look like, but on my phone that looks like a smooth gradient with no noise.
- bufferoverflow 3y ago
  Same here. I am on Android Chrome.
- shannifin 3y ago
  Yeah, no Android Chrome support for something in the code...
chrismorgan 3y ago
I’ve wanted to use a variety of SVG filters like this at times, but the problem is that their appearance varies significantly from engine to engine and by scaling factor, and so it only ends up working for subtle things where imprecisions don’t matter much, and I end up regretfully but consistently going back to raster stuff. Also the pixel-by-pixel nature of them means that things like feDisplacementMap destroy antialiasing, which spoils half of the situations you might like to use it.
aidenn0 3y ago
Perlin Noise (and it's successor Fractal Noise) are incredible bang-for-your-buck when adding realism and/or an "organic" feel to things. You can see it used to great effect, for example, in Aladdin (1992) for the scene where they escape from the Cave of Wonders.
FrostKiwi 3y ago
FYI, don't use this as page backgrounds. I tried weeks ago and there are all kinds of weird bugs cropping up on various devices up to full page freezes for larger sites or the svg simply stopping rendering after some size. Using this for lovely pixel sized noise backgrounds is what I would love, but it's not there yet on the performance and stability side.
geokon 3y ago
Does anyone have any resource on which features are broken across implementations? How to stay sane with SVG? I recently made the mistake of making a complex conference poster using SVG. It now renders different in every browser and program https://kxygk.github.io/imergination/ https://kxygk.github.io/imergination/ In making the graphic I noticed: - You can include/link SVGs to embed, but if they in turn include other SVGs then it will not work (ex: the poster -> diagrams -> several plots/maps). So dynamic SVGs that are updated when subimages change are impossible - Webbrowsers randomly and will refuse to display embedded/linked image b/c of "security" - Ex: in the above link, if you try to open the SVG in a separate tab it won't display correctly: https://raw.githubusercontent.com/wiki/kxygk/imergination/agu2023-poster.svg https://raw.githubusercontent.com/wiki/kxygk/imergination/ag... - It was basically impossible to turn a complex SVG into a PDF without inconsistencies and/or running out of RAM - Every SVG-to-PDF converter gives different results - Many implementations (ex: Inkscape) will randomly treat included SVGs are a raster graphic. I never pinpointed when this would occur (and even then, when rendering to PNG Inkscape doesn't propagate the DPI setting to subimages)
deleted 3y ago
[deleted]
RugnirViking 3y ago
ooh this is cool. Is there any support for gradients of these? I guess maybe you could do some mask thing for opacity. But it would be cool if we could vary the fractal noise frequency
nektro 3y ago
i believe this design style came out of https://fluent2.microsoft.design/ https://fluent2.microsoft.design/
j0hnyl 3y ago
"It’s not perfect, and notably renders differently in Safari than other browsers but it achieves what I set out to accomplish." This is the part that drives me nuts. I do a lot of generative art with SVGs and avoid the filters altogether because of this.
JamieDawsonCode 3y ago
This specific style of grain on SVGs reminds me of 1970's Sci-Fi art that depicted the future. Thank you for making this tutorial, I'm gonna have to experiment with this!
zaik 3y ago
Mobile Firefox seems to have an allergic reaction to this page when zooming in on the SVGs.
qrohlf 3y ago
Early versions of Trianglify supported noise addition using feTurbulence but I ultimately removed it because of some of the rendering inconsistencies mentioned in this thread, alongside performance issues on certain platforms (you would think that generating 2d monochrome noise would be pretty cheap in this day and age, but it must be part of the SVG stack that never saw much optimization because it would absolutely lock up rendering for several hundred milliseconds when applied to even moderately sized viewports). Of course, this was all back in ~2015 so the landscape has definitely improved, but not quite to the point where I would consider adding support back in.

499 points by dimmke 3y ago

This reminds me of how film photographers and film-makers strived to eliminate grain while digital photographers felt the need to add it back in. The grass is greener on the other side! I confess to finding the examples on this page quite appealing, amidst all the digital sterility.

TheRealPomax 3y ago
It'd be good not to overgeneralize. For as long as we've been doing digital video, and then later, digital photography, there have been as many folks trying to minimize noise as trying to eliminate noise as trying to simulate noise as intentionally exploiting noise. Noise as a thing was never the problem, it was always about whether there was too much of it.
- Puts 3y ago
  Exactly. Noise adds texture - which is an important ingredient in visual art and design. But too much noise obstructs the image. It's all about balance – just like cooking.
treprinum 3y ago
Wasn't that kinda solved by Foveon X3? Film-like yet digital.
- esafak 3y ago
  I think the problem resolved itself when a new generation grew up with digital photography and did not long for grain. Now it is a retro aesthetic, like gen-Z's use of pixel art.
- dharma1 3y ago
  Foveon just has 3 vertically stacked layers of photodiodes (one for each RGB colour) instead of a single one with Bayer filters like other digital camera sensors. It’s not related to film grain (which is a byproduct of silver particles in celluloid).
  - treprinum 3y ago
    The behavior of the sensor with its flaws closely resembled film. The sharpest digital pictures I've ever observed.
    - dharma1 3y ago
      they are very sharp indeed, and the colours are quite film like. I have a DPM2 and waiting for the Foveon full-frame sensor that Sigma is still working on.

jessehattabaugh 3y ago

The examples are practically invisible in dark mode. The author should use rasterized screenshots with white backgrounds, or a media query with a brighter color.

half-kh-hacker 3y ago
Which dark mode are you talking about? As far as I can tell the page (& demos) don't ship any styles for prefers-color-scheme: dark at all
- rtkwe 3y ago
  Reminds me of the meme of the person shoving a stick into their bikes wheel then complaining about ______. Used to get it a lot here with people complaining about sites being broken because they were hard blocking essentially all javascript, the issues are your own making here...
- shrx 3y ago
  In my case firefox used the OS's (Windows 10) dark mode preference. In about:config the layout.css.prefers-color-scheme.content-override setting was on 2 (system). Setting it to 3 (browser) turned the dark mode off.
nix0n 3y ago
The Firefox "Dark Background and Light Text" extension works fine on this page when using the "Invert" option.
ssgodderidge 3y ago
Sounds like a great idea if you would like to use these in your own dark mode site. The demo site is not in dark mode, however, so why should they optimize for this?

Minor49er 3y ago

> I’m not hip enough to know if this style has been assigned a pithy label, but I do enjoy it. At the same time, I find it frustrating — because as far as I can tell (the lack of examples I have seen in the wild supports this theory) there isn’t an easy way to replicate these illustrations with SVGs The term the author is looking for is "dithering". CSS-Tricks explains this on their page "Grainy Gradients" using the same technique: https://css-tricks.com/grainy-gradients/ https://css-tricks.com/grainy-gradients/ There's also a decent alternative to doing this with CSS, though it's applied to the entire image: https://github.com/tomren1/dither-with-css https://github.com/tomren1/dither-with-css

JKCalhoun 3y ago
Is that really dithering when you're not using a limited palette to simulate a larger one? Reminds me of vintage travel poster art. Example: https://www.graphicart-news.com/wp-content/uploads/2012/09/28_AF_afrique.jpg https://www.graphicart-news.com/wp-content/uploads/2012/09/2...
- betenoire 3y ago
  It's a dithering effect for sure. Drop shadows aren't actually shadows, either :)
  - kookamamie 3y ago
    "Dithering" is adding noise to randomize quantization errors and to hide banding. The OPs post looks like just adding noise for getting a noisy look.
    - itishappy 3y ago
      It's the same effect! OP may have done this for style, but the effect also happens to hide any banding that may have be present.
      - Someone 3y ago

dexwiz 3y ago

Reminder that art is cyclic. This reminds me of the Memphis airbrushed geometric art from the 80s. The latest flat design cycle is dead, and one way to evolve is take the latest generation (flat) and combine it with current retro trend (80s/90s redistilled by GenZ). So you take the natural noise generated by airbrushed artwork of the 80s/90s and translate that into digital art via gradients. Voilà! You have a style that will dominate the digital art landscape for the next few years.

esafak 3y ago
Are there any resources to stay abreast of design trends? I know about https://aesthetics.fandom.com/ https://aesthetics.fandom.com/
- shermantanktop 3y ago
  Just visited. Not sure how to label the (dubious) design sensibility of the site itself, but the massive ugly ads are making me realize my adblocker is off. Interesting content nonetheless.
- werber 3y ago
  codrops is a nice one
  - deleted 3y ago
    [deleted]
- mp_mn 3y ago
  I like CARI a lot https://cari.institute/aesthetics https://cari.institute/aesthetics
  - dimmke 3y ago
    This is remarkable. Thank you!
  - aidenn0 3y ago

Retr0id 3y ago

The "ApeFest" website[1] (yeah, the one that burnt attendees' retinas with UV) has some dynamic noise going on, and I had a look at the CSS. They're actually using a tiled PNG overlay[2], which gets wobbled around "randomly" using CSS animations (edit: actually, looks like they move it with JS). Pretty low-tech, but it works. [1] https://apefest.com/ https://apefest.com/ [2] https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpv...

cosmotic 3y ago
The apefest effect uses a lot of CPU and thus energy.
- Retr0id 3y ago
  It does if you redraw every frame, but if you disabled the animation and made it static I have a feeling it could beat the SVG method (although it probably wouldn't look as good). It also has the advantage of looking mostly the same in every browser - the comments here report inconsistencies with the SVG method.
  - spartanatreyu 3y ago
    I experimented with an effect where a single frame of noise was generated, then reused throughout an animation: https://codepen.io/spartanatreyu/pen/qBKBgPN?editors=1100 https://codepen.io/spartanatreyu/pen/qBKBgPN?editors=1100 I was initially trying to replicate a visual effect from a music video but it morphed into this. I kind of like the effect

rpigab 3y ago

I was wondering if it would be wise and feasible to add WebGL shaders over SVGs?

globular-toast 3y ago

This looks really strange in Firefox. Especially in the full example[0]. The "noise" has regularity as if it has been tiled and almost looks like it has been run through a lossy compressor. [0] https://danielimmke.github.io/noisy-shapes/ https://danielimmke.github.io/noisy-shapes/

Tistron 3y ago
They look almost identical to me in Fx and Chrome. Safari on the other hand...

Tistron 3y ago

I recently was playing with SVG, to get a dropshadow I couldn't make when drawing on canvas. I could not get css dropshadows in SVG working in Safari and had to use SVG native drop shadow filters, and then that looks different in Safari than in the other browsers. The specific thing is at https://www.einarmagnus.net/pages/logo https://www.einarmagnus.net/pages/logo I do my best to detect safari with javascript and activate the SVG version and disable the css version. Background on the "recursive yin yang" is here: https://einarmagnus.net/blog/2020/01/22/finding-the-logo https://einarmagnus.net/blog/2020/01/22/finding-the-logo Maybe I'll play with texture, I like that aesthetic a lot. But it is frustrating that it looks so differently in Safari. Do you think that they will converge on how they interpret SVG?

epiccoleman 3y ago
That recursive yin yang article is great, and the logo you got out of the experiment is incredibly cool. I'm impressed!
- Tistron 3y ago
  Thank you!
airstrike 3y ago
Your link is so cool it's worth a submission of its own. Thanks for sharing!
- Tistron 3y ago
  Thank you! I didn't get around to making UI for it, but I also added the ability to link to animations: https://einarmagnus.net/pages/logo?animate=wait:3000;angle:0;wait:2000;color:gray;wait:3000;angle:-20;wait:2000;color:fire;wait:3000;angle:0;wait:2000;color:gray;wait:3000;angle:45;wait:2000;color:sea https://einarmagnus.net/pages/logo?animate=wait:3000;angle:0... I lose myself in doing these little things instead of marketing or copy, haha.
  - 3y ago

ortichic 3y ago

I like the effect, but is there a way to make it independent of the zoom level? On a related note, this probably adds randomness, is there a way to seed it? For example to be able to define a single correct render result at a given size.

dimmke 3y ago
Author here, yes there is! The underlying algorithm and implementation in SVG accepts a seed value: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/seed https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/s...
- smusamashah 3y ago
  I am on phone and can not see the noise in the final image at all. I think its there but when I zoom in, it feels like it disappears. You should probably consider making it bigger or independent of zoom for the sake of mobile viewers.
WatchDog 3y ago
As the other comment mentions, yes there is a seed attribute, also the algorithm for the randomness function is defined in the specification as 186 lines of C code[0], so in theory different implementations should behave the same. Although looking at the cod, it uses floating point math, which I believe is implementation defined, so maybe it could behave differently on various platforms. [0]: https://drafts.fxtf.org/filter-effects/#elementdef-feturbulence https://drafts.fxtf.org/filter-effects/#elementdef-feturbule...

pdn1 3y ago

Gradient.

gatkinso 3y ago

Really excellent work

Tao3300 3y ago

That's cool. Looks like Inkscape supports adding this kind of noise through its various effects in its Filters menu. Exported as a Plain SVG and looking at the code confirms the use of feTurbulence. For comparison, I also did a test to see how Affinity Designer 2 does it, since it has noisy fills. The SVG it exports has the noise embedded in it as a base64 jpeg image!

OliveMate 3y ago
I'm currently away from my PC so I can't check myself, does it embed a single noise texture and use it multiple times, or does it generate a texture for each use of noise? As someone who can't justify an Adobe license and can't wrap their head around InkScape, Designer has been a perfect alternative bar quirks like this.
- Tao3300 3y ago
  It might have been a deliberate choice. That way you don't have to count on filter support whenever and wherever it's being rendered.
herpdyderp 3y ago
Affinity Designer 2 has been really nice vs paying for Adobe Creative Cloud but it sure has required me to manually tweak SVGs a lot!

IshKebab 3y ago

I'm not sure what it's supposed to look like, but on my phone that looks like a smooth gradient with no noise.

bufferoverflow 3y ago
Same here. I am on Android Chrome.
shannifin 3y ago
Yeah, no Android Chrome support for something in the code...

chrismorgan 3y ago

I’ve wanted to use a variety of SVG filters like this at times, but the problem is that their appearance varies significantly from engine to engine and by scaling factor, and so it only ends up working for subtle things where imprecisions don’t matter much, and I end up regretfully but consistently going back to raster stuff. Also the pixel-by-pixel nature of them means that things like feDisplacementMap destroy antialiasing, which spoils half of the situations you might like to use it.

aidenn0 3y ago

Perlin Noise (and it's successor Fractal Noise) are incredible bang-for-your-buck when adding realism and/or an "organic" feel to things. You can see it used to great effect, for example, in Aladdin (1992) for the scene where they escape from the Cave of Wonders.

FrostKiwi 3y ago

FYI, don't use this as page backgrounds. I tried weeks ago and there are all kinds of weird bugs cropping up on various devices up to full page freezes for larger sites or the svg simply stopping rendering after some size. Using this for lovely pixel sized noise backgrounds is what I would love, but it's not there yet on the performance and stability side.

geokon 3y ago

Does anyone have any resource on which features are broken across implementations? How to stay sane with SVG? I recently made the mistake of making a complex conference poster using SVG. It now renders different in every browser and program https://kxygk.github.io/imergination/ https://kxygk.github.io/imergination/ In making the graphic I noticed: - You can include/link SVGs to embed, but if they in turn include other SVGs then it will not work (ex: the poster -> diagrams -> several plots/maps). So dynamic SVGs that are updated when subimages change are impossible - Webbrowsers randomly and will refuse to display embedded/linked image b/c of "security" - Ex: in the above link, if you try to open the SVG in a separate tab it won't display correctly: https://raw.githubusercontent.com/wiki/kxygk/imergination/agu2023-poster.svg https://raw.githubusercontent.com/wiki/kxygk/imergination/ag... - It was basically impossible to turn a complex SVG into a PDF without inconsistencies and/or running out of RAM - Every SVG-to-PDF converter gives different results - Many implementations (ex: Inkscape) will randomly treat included SVGs are a raster graphic. I never pinpointed when this would occur (and even then, when rendering to PNG Inkscape doesn't propagate the DPI setting to subimages)

deleted 3y ago

[deleted]

RugnirViking 3y ago

ooh this is cool. Is there any support for gradients of these? I guess maybe you could do some mask thing for opacity. But it would be cool if we could vary the fractal noise frequency

nektro 3y ago

i believe this design style came out of https://fluent2.microsoft.design/ https://fluent2.microsoft.design/

j0hnyl 3y ago

"It’s not perfect, and notably renders differently in Safari than other browsers but it achieves what I set out to accomplish." This is the part that drives me nuts. I do a lot of generative art with SVGs and avoid the filters altogether because of this.

JamieDawsonCode 3y ago

This specific style of grain on SVGs reminds me of 1970's Sci-Fi art that depicted the future. Thank you for making this tutorial, I'm gonna have to experiment with this!

zaik 3y ago

Mobile Firefox seems to have an allergic reaction to this page when zooming in on the SVGs.

qrohlf 3y ago

Early versions of Trianglify supported noise addition using feTurbulence but I ultimately removed it because of some of the rendering inconsistencies mentioned in this thread, alongside performance issues on certain platforms (you would think that generating 2d monochrome noise would be pretty cheap in this day and age, but it must be part of the SVG stack that never saw much optimization because it would absolutely lock up rendering for several hundred milliseconds when applied to even moderately sized viewports). Of course, this was all back in ~2015 so the landscape has definitely improved, but not quite to the point where I would consider adding support back in.